加背景图片小图标时小图标看上去上浮1、2px

2023-10-19 02:10

文章标签 小图标背景图片看上去 2px 上浮

本文主要是介绍加背景图片小图标时小图标看上去上浮1、2px，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

处理之前的效果

在这里插入图片描述

处理之后的效果

在这里插入图片描述

具体实现

实现方法很简单，给图标额外再加一个 position:relative; top:1px; 就可以啦！

  .add_icon {position:relative;top:1px;display: inline-block;width: 12px;height: 12px;background-image: url('../../../assets/images/report_reduce_icon.png');background-size: 100%;background-repeat: no-repeat;background-position-y: bottom;}

这篇关于加背景图片小图标时小图标看上去上浮1、2px的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

http://www.chinasem.cn/article/236599。 23002807@qq.com

CSS学习6--背景图片、颜色、位置、附着、简写、透明、缩放、多背景、凹凸文字、导航栏例子

CSS背景一、背景颜色和图片二、背景位置三、背景附着四、背景简写五、背景透明六、背景缩放七、多背景八、凹凸文字九、导航栏例子一、背景颜色和图片 background-color: pink; 背景颜色backgroundoimage: url(##.jpg); 背景图片background-repeat: 平铺 repeat-x横向平铺，repeat-y纵向平铺；平铺不到

类似antdesign悬浮按钮上浮小动画【已验证，正常运行】

以下是基于vue2的完整代码，习惯用vue写了，如果是其他框架复制div和css就行部分代码来自我搭建的GPT4o/Claude <template><div class="progress-container"><div class="circlenav-container"><div class="circle-nav-list" :class="{'fade-in':showCircl

【vue css】background设置背景图片不显示问题

问题：如上图所示，添加背景图片页面没有显示解决：添加background-position: center center 即可显示但是不知道为什么添加这个属性就可以，求大神解惑

4、Swing在JPanel中添加背景图片方法

4、Jpanel面板中加载背景图片在实际应用Java做界面的过程中，常常会涉及到加载背景图片以使页面美化。下面整理了一个小模块以便于调用。 1 package com.tntxia.commonswing.panel; 2 3 import java.awt.*; 4 import javax.swing.JPanel; 5 6 /** 7 * 有背

div既有背景图片又要有背景颜色怎么做？

背景颜色(background-color)放在后面，背景图片(background: url())放在前面即效果如下看，是不是又有背景图片又有背景颜色了

visual studio 2013设置背景图片

设置方法很简单：安装扩展ClaudiaIDE 1、在这里下载扩展，https://visualstudiogallery.msdn.microsoft.com/9ba50f8d-f30c-4e33-ab19-bfd9f56eb817 2、然后双击即可完成安装。该插件的背景萌妹子图片位置在： C:\Users{Username}\AppData\Local\Microsoft\Visu

【已解决】Win11任务栏怎么使用小图标_Win11任务栏调整图标大小方法

使用注册表编辑器 1、打开运行，并输入 regedit 命令，确定或回车，可以打开注册表编辑器。 2、注册表编辑器窗口，依次展开到以下路径： HKEY_CURRENT_USER-Software-Microsoft -Windows-CurrentVersion-Explorer-Advanced 然后新建名称为 TaskbarSi 的DWORD值。 3、编辑 Taskb

原生JS实现下滑到当前模块时，上浮显示

源码： <div style="height: 1000px;"></div><div class="yingxiao-box"><div id="yingxiaoimg" class="yingxiao-img"><imgsrc="https://alp.alicdn.com/1703175009746-2100-220.png"alt=""></div></d

$CSS\JS实现页面背景气泡logo上浮效果$

CSS\JS实现页面背景气泡logo上浮效果

效果图：单容器显示气泡： <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bubble Logo Animation</title></head><

vue3 antdv3 去掉Modal的阴影背景，将圆角边框改为直角的显示，看上去不要那么的立体的样式处理。

1、来个没有处理的效果图：这个有立体的效果，有阴影的效果。 2、要处理一下样式，让这个阴影的效果去掉：图片的效果不太明显，但是阴影效果确实没有了。 3、代码： /* 去掉遮罩层阴影 */.ant-modal-mask {box-shadow: none !important;}/* 去掉Modal内容区域的阴影及圆角 */.ant-modal-content {box-sha

加背景图片小图标时小图标看上去上浮1、2px

处理之前的效果

处理之后的效果

具体实现

相关文章