徐州英文网站seo,邢台贴吧123,小红书推广平台,调颜色网站之前一直以为用background引入的图标无法染色#xff08;非字体图标#xff09;#xff0c;现在才知道有黑科技可以用#xff0c;就是利用drop-shadow。
代码示例 !DOCTYPE html
html
head langenmeta charsetUTF-8非字体图标现在才知道有黑科技可以用就是利用drop-shadow。
代码示例 !DOCTYPE html
html
head langenmeta charsetUTF-8title/titlestyle.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
bodyh3原始图标/h3span classface1/spanh3染色图标(两层标签)/h3span classface2i/i/spanh3染色图标(after)/h3span classface3/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?id1c1jbaatitleCSS染色图标图片
