CSS染色图标(图片)
之前一直以为用background引入的图标无法染色(非字体图标),现在才知道有黑科技可以用,就是利用drop-shadow。
代码示例
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.face1{display: inline-block;width: 40px;height: 40px;background-image: url(face.svg);}.face2{display: inline-block;width: 40px;height: 40px;overflow: hidden;}.face2 i{display: inline-block;width: 40px;height: 40px;background-image: url(face.svg);transform: translateX(-100%);-webkit-filter:drop-shadow(40px 0 #F88E1D);}.face3{display: inline-block;width: 40px;height: 40px;overflow: hidden;background-image: url(face.svg);}.face3:after{content: '';display: inline-block;width: 40px;height: 40px;transform: translateX(-100%);-webkit-filter:drop-shadow(40px 0 #F88E1D);background: inherit;}</style>
</head>
<body><h3>原始图标:</h3><span class="face1"></span><h3>染色图标(两层标签):</h3><span class="face2"><i></i></span><h3>染色图标(after):</h3><span class="face3"></span>
</body>
</html>
效果
注意问题
1.使用after作为第二层标签的这种方式,可能会出现最后效果有些杂色。
这是因为after背景继承了父标签,然后以它为drop-shadow,这时就出现两个图标了。问题就出在父标签的背景图(第三个图标)被叠在下面,图标如果有比较细的线条,叠在下面的图标会像糊在下面。
所以最好不要用这种方式,老老实实写两层标签。
2.在低版本的chrome里,需染色图标如果是在有滚动条的区域内,会染色不了。
这时需要在滚动区域加属性:
position: relative;
z-index:1;
总结
如果有需要染色图标,做成字体图标好些。这种drop-shadow的方式,最后再选。
本文转载于:猿2048➱https://www.mk2048.com/blog/blog.php?id=1c1jbaa&title=CSS染色图标(图片)
CSS染色图标(图片)相关推荐
- css ul li 图标 图片位置定位 背景定位
css ul li 图标 图片位置定位 背景定位 这是网站页面只有一张背景图片的时代 众多大型网站都是背景图片只用一整张这种模式 背景图片的定位应用广泛 .cases li{ lineheight:2 ...
- html给图标加角标,HTML+CSS入门 如何使用CSS创建一个图片角标
本篇教程介绍了HTML+CSS入门 如何使用CSS创建一个图片角标,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 角标是一个给某元素标明"New",& ...
- css设置图标居左_「css图片居中」css - 常用 垂直/水平居中 + 左右布局 - seo实验室...
css图片居中 主要内容 学习文献 元素居中 胡子哥 - 谈一谈我在阿里的成长 + 2 左右布局 几种常见的CSS布局 -- 掘金 BFC 实现三栏布局的几种方法-- github 实现多列等高布局 ...
- css图片横向压缩,【css样式生成 图片合并压缩工具】Sprite,你值得拥有
好久好久没有更新博客了,越来越懒...话说懒也有懒的好处,懒的时候你可能会想着用些神马方法来帮你偷懒.没错,下面就给大家介绍个博主前不久开发的[css样式生成 & 图片合并压缩工具]Spirt ...
- css加号图标_一步步打造自己的纯CSS单标签图标库
原标题:一步步打造自己的纯CSS单标签图标库 作者:深海鱼在掘金 原文:https://juejin.im/post/5a1c21c1f265da430b7af6e5 图标作为网页设计中的一部分,其在 ...
- css加号图标_手把手教你打造一个纯CSS图标库
来,干了这碗安利 写这篇文章的目的其实就是为了安利一下我的图标库: 主题说完了,下面进入正题. 在web开发中,我们经常要用到一些小图标(加减勾叉等).通常做法就两种: 直接使用图片: 使用css/s ...
- 05 react img css修改svg图片样式
react img css修改svg图片样式 svg图片的相关理论 定义 优点 前端引入svg图片的方式 方式一:<svg>标签引入,内嵌到 HTML 中 方式二,修改svg的颜色 方式三 ...
- 100多个纯CSS动画图标
我们在做页面开发的时候,可能要用到许多的动画图标. 那么只要套用这个CSS的图标框架,在加上一些修饰,就可以得到非常棒的图标样式, 下面我们来看一下这些图标的样式. 图标样式图片 首先我们要引用写好 ...
- html+css+js实现图片,文字,视频,背景音乐盛宴
你进来了吗? 好吧,如果你感受到了欺骗,请您退出吧! 人菜瘾大,时隔一年,终究还是选了web前端,回想去年写的第一条博客也是html,命运总是这么巧合,哈哈哈哈! html+css+js实现图片,文字 ...
最新文章
- 计算机用电子表格验证方案,Excel电子表格的验证1.PDF
- 利用宝塔 开启apache tomcat ssl 失败的解决方法
- mysql web搜索系统_【20201011】做个搜索引擎(6)——网页蜘蛛代码编写(二)
- Spring Boot文档阅读笔记-@SpringBootApplication官方解析与实例(1.5.19)
- 从1.5k到18k, 一个程序员的5年成长之路
- MQ如何防止消息丢失
- 如何正确认识大数据技术
- excel模板 基金账本_有哪些好用的Excel个人账单模板?
- Git 生成SSH Key 之使用PuTTYgen工具
- bat文件转exe工具分享
- m4s格式转换mp3_amr转换mp3格式文件
- 机器学习 -- 主成分分析
- Umbraco 非常简单,扩展性很强的一个CMS
- ios 开发资源网 (from eagel)
- karabiner-elements Mac下实现按键全定制 capslox完美替代品
- SQLMap使用|命令大全(干货)
- Oracle ORA-01460报错解决方法
- php备忘录,备忘录模式及其php实现
- ACM-ICPC 2018 南京赛区网络预赛 E. AC Challenge 状压dp
- 京东运维开发工程师 2019校招卷总结