在CSS中怎样从一个png图片里取出小图标

最新推荐文章于 2023-02-17 15:27:37 发布
最新推荐文章于 2023-02-17 15:27:37 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsnjzgb/article/details/78152371
版权
以png 图片的左上角为原点,往右往下均为负值

<div class="mailicon see"></div>&nbsp已看

<div class="mailicon unsee"></div>&nbsp未看

.mailicon {display: inline-block;width:16px;height:16px;line-height:16px;background:url(images/mail.png) no-repeat;}
.see{background-position:-48px -16px} 用了第二行第三个小图标
.unsee{background-position:-48px 0px} 用了第一行第三个小图标

（高度和宽度都是16px）

jsnjzgb
关注
专栏目录
CSS常用的选择器
weixin_53144068的博客
12-21 637
对大多技术人员来说都比较熟悉 CSS 选择器，举一例子来说，假设给一个 p 标签增加一个类（class），可是执行后该 class 中的有些属性并没有起作用。通过 Firebug 查看，发现没有起作用的属性被覆盖了，这个时候突然意识到了 CSS 选择器的优先级问题。严格来讲，选择器的种类可以分为三种：标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入 style="" 的方式，应该是 CSS 的一种引入方式，而不是选择器，因为根本就没有用到选择
html+css学习笔记
hutongkoudemihu的博客
06-19 1002
HTML+CSS+Javascript=网页HTML:Hyper Text Markup language 超文本标记语言；定义网页中有什么。CSS:Cascading Style Sheets 层叠样式表；定义网页中的东西长什么样子。MarkDown:MD 文档格式标准 [toc]可以加目录w3c 万维网联盟，非盈利性的组织：w3c.org 为互联网提供各种标准XML 可扩展的标记语言：extension markup lanuage,用于定义文档结构的。html HTML是W3C组织定义的语言标准。HT
css3实现 png 图片高亮自左到右过渡的方式 (一张图实现不遮住png的透明背景)
韩旭的博客
12-02 3360
文章目录一、用一张图解释想要实现的效果。二、思考：如何实现？实现的多种方式。2.1、2图代码及实现效果2.2、单图过滤实现效果2.3、单图遮罩实现效果 一、用一张图解释想要实现的效果。 二、思考：如何实现？实现的多种方式。 2.1、2图代码及实现效果 我们先去设想一下，如果是两张图那么很简单的就实现了，先说一下两张图的实现思路： 创建一个包裹div，创建两个divbox模块 div模块内部都是img标签 给img标签设置固定的宽高 包裹div设置相对定位，两个divbox设置绝对定位，box模块2，设置
CSS改变png图片颜色
nchu2020的专栏
03-05 2万+
来源地址：http://www.zhangxinxu.com/wordpress/?p=5429 张鑫旭大神的个人网站上看到的，纯属分享和记录 css div.icon{height:20px;width:20px;overflow: hidden;} .icon .icon{width: 20px;height: 20px;display:block;p
【我不熟悉的css】04. jpg、png 合理使用图片格式
qq_17335549的博客
09-02 368
jpg、png 合理使用图片格式
css 单选按钮图标替换
weixin_33836223的博客
12-29 341
一.需求：替换单选按钮默认图标 二.原理： 　　1.使用label扩大选择热区，隐藏input元素， 　　2.添加一个元素设置其背景图作为默认显示的按钮图标并显示， 　　3.为该元素添加一个伪元素相对于添加的元素绝对定位且默认不显示，在该伪元素中添加默认选中的背景图 　　4.在input元素选中后，显示该伪元素，因为伪元素是绝对定位层级比较高所以会显示在上面，即选中的图标 三.HTML...
html 样式复盖,css 样式——后面覆盖前面
weixin_28952383的博客
06-28 500
上代码.yellow {background: yellow;}.red {background: red;}这个区域渲染出来是什么颜色呢？红色？ 黄色？答案是红色不知道有多少人和我有一样的误区，一直以为是由class中的排版顺序决定同优先级样式应用顺序的。。。实际上是谁在css文件中，权重相等，声明在后面，那么最终就应用谁解释Finally, sort by order specified: i...
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
m0_67394006的博客
03-02 9120
文章目录 前言 第一回合 一、知识点：cookie（21/09/06） 二、知识点：节流和防抖（21/09/07） 三、知识点：var和let以及const（21/09/08） 四：知识点：深拷贝和浅拷贝（21/09/09） 五、知识点：作用域和作用域链（21/09/10） 六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11） 七、知识点：重排和重绘（21/09/12） 八、知识点：TCP和UDP（21/09/13） 九、知识点：三次握手（21/09/15） 十、知识点：绝对定位和相对定
前端200道面试题及答案（更新中）
热门推荐
m0_65450343的博客
06-11 11万+
目录html相关说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？link和@import的区别浏览器如何实现不同标签页的通信？iframe的优缺点canvas做项目用到哪些h5新特性和css3新特性？用localstorage和sessionStorage写过什么？如何解决页面内容加载缓慢的问题？cookie的特点*页面渲染过程css相关javascript以及es6相关http相关浏览器bootstrapvue相关node相关微信小程序reac
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
weixin_46615135的博客
03-23 1485
前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集
(css)修改icon图标大小
nyf_unknow的博客
02-17 2962
【代码】(css)修改icon图标大小。
一张图片中多个图标如何通过CSS定位显示？
hjh_cos
01-19 1247
CSS sprites技术
css如何定位大图中的小图标
u010046887的专栏
03-30 4746
Document div {width:62px;height:67px;}//定义div的宽高 div{background-image:url(img/pic.jpg);}//定义背景图片 div.pic{background-position:0px 0px;}//图片的起始位置 div.pic:hover{background-position:-77px 0px ;}//图片偏移
css 实现 png 更改颜色
春江水暖丫先知
10-11 3056
如何使用css 更改 png填充色
CSS从一个png图片里取出(截取)里面的小图标
鬼谷传人的博客
06-12 1万+
css文件.icon { background: url(icon.png) no-repeat; /*url为png图片的路径*/ /*width和line-height分别对应每个小图标的宽和高*/ width: 20px; line-height: :20px; display: inline-block; } .icon-small { /
从一张大图里面获取各种小图标
聂亚兵的博客
09-23 2128
.lifearea { width: 299px; margin: 200px auto; } .la_ul li { width: 72px; height: 60px; border: 1px solid #98FB98; float: left; margin-left: -1px; margin-top:
PNG图片详解(转)
一路俊逸的专栏
07-27 1097
1、PNG图片类型 PNG格式有8位、24位、32位三种，下面是一些术语： ·     索引透明：类似于GIF，某一像素只有全透和全不透明两种效果 ·     Alpha透明：半透明 PNG8 8位的PNG最多支持256（2的8次方）种颜色，8位的PNG支持索引透明和alpha透明。 PNG24 支持2的24次方种颜色，但不支持透明信息。 PNG32 32位的PNG在24
一张png图片 上面有多个图标，如何用CSS准确的知道其中某个图片的坐标
weixin_30660027的博客
11-30 984
一张png图片 上面有多个图标，如何用CSS准确的知道其中某个图片的坐标 ，如下图 可以使用 background background:url(images/xx.png) 40px 10px no-repeat; 转载于:https://www.cnblogs.com/xiaoxiao2014/p/5007831.html...
css3+html5——.png格式和.jpg格式图片的区别+返回顶部设计
十二tel
06-10 3549
刚开始写网页时觉得插入图片能够用就行了，根本不管图片格式，今天才知道原来网页中.png和.jpg格式的图片的使用是有一定区别的，相见恨晚啊..后面是个小彩蛋：固定位置返回顶部设计...eg:1）.png:支持透明，颜色比较广，比较常用；2）.jpg:不支持透明。案例：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;...
在css中怎样让鼠标在图片上出现一个方框跟着在鼠标停留的位置
最新发布
05-28
您可以使用CSS中的:hover伪类和transform属性来实现这个效果。具体步骤如下： 1. 首先，在CSS中，给图片添加一个:hover伪类来设置鼠标悬停时的样式。 ```css img:hover { transform: scale(1.2); } ``` 2. 接着，在:hover伪类中添加transform属性，设置scale值来放大图片。这里的scale值可以根据实际情况自行调整。 ```css img:hover { transform: scale(1.2); } ``` 3. 最后，在:hover伪类中添加一个伪元素，使用绝对定位（position:absolute）来创建一个跟随鼠标移动的方框，使用transform属性来调整方框的位置。 ```css img:hover::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border: 2px solid #000; box-sizing: border-box; pointer-events: none; /* 使鼠标事件能够穿透伪元素到达图片元素 */ } ``` 这里使用::after伪元素来创建方框，使用translate()函数和top、left属性来将方框居中在鼠标位置，使用width、height、border、box-sizing属性来设置方框的大小和边框样式，使用pointer-events属性来使鼠标事件能够穿透伪元素到达图片元素。 完整的代码示例如下： ```css img:hover { transform: scale(1.2); } img:hover::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border: 2px solid #000; box-sizing: border-box; pointer-events: none; } ``` 希望这个解答能够帮到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值