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染色图标(图片)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370447.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

eclipse安装java web插件

1 查看eclipse版本 找到eclipse的安装目录&#xff0c;找到readme文件&#xff0c;打开其中的html文件&#xff0c;我的是4.6版本的,代号是oxygen 2 安装 打开eclipse,点击help-Install new software-单击add&#xff0c;在弹出窗口中输入网址&#xff1a; http://download.ecl…

实现输入框小数多 自动进位展示,编辑时实际值不变

今天遇到个业务需求&#xff0c;要求输入框&#xff0c;输入数字的小数位数可以很多位&#xff0c;但移开后显示&#xff0c;只显示小数点后两位 &#xff08;四舍五入&#xff09;&#xff0c;当要编辑的时候&#xff0c;展现其原来的输入数据。 闲话不多说&#xff0c;当时也…

使用Jasper Reports以Java创建报告

上周&#xff0c;我试图使用Jasper创建报告。 在这篇文章中&#xff0c;我将记录一些资源和链接&#xff0c;以便对任何寻求类似信息的人都有用。 我将介绍Jasper报告&#xff0c;示例和Dynamic Jasper的生命周期。 Jasper Reports是世界上最受欢迎的开源报告引擎。 它完全用…

CentOS7 安装NodeJS

一、切换目录到/usr/local/src 命令行&#xff1a;cd /usr/local/src 二、下载node.js&#xff08;我这里下载的是二进制的源码&#xff09; 命令行&#xff1a; wget https://nodejs.org/dist/v8.9.1/node-v8.9.1-linux-x64.tar.xz 图片&#xff1a; 三、解压压缩包 命令行&am…

CSS3基础2(变形与动画)

<!DOCTYPE html5><html lang"en"><head> <meta charset"UTF-8"> <title>CSS3基础知识&#xff08;动画&#xff09;</title> <style> /*div{*/ /*width: 150px;*/ /*hei…

ASP.NET Core2.0 环境下MVC模式的支付宝PC网站支付接口-沙箱环境开发测试

1.新建.NET Core web项目 2.Controllers-Models-Views 分三个大部分 3.下载安装最新sdk 官方的SDK以及Demo都还是.NET Framework的&#xff0c;根据官方文档说明新建网站后还是需要引用官方SDK的源码&#xff0c; 在这里直接使用网上一位朋友的用.NET Standard 2.0 进行实现了支…

如何在redhat8里使用gcc命令_如何使用who命令检查用户登录信息

请关注本头条号&#xff0c;每天坚持更新原创干货技术文章。如需学习视频&#xff0c;请在微信搜索公众号“智传网优”直接开始自助视频学习1. 前言本教程主要介绍如何使用who命令检查用户登录信息。如何使用who命令检查用户登录信息Linux中的who命令列出了系统上的所有登录用户…

研究僵局–第4部分:修复代码

在这个简短的博客系列的最后BadTransferOperation中&#xff0c;我一直在讨论分析死锁&#xff0c;我将修复BadTransferOperation代码。 如果您看过本系列的其他博客 &#xff0c;那么您将知道&#xff0c;为了达到这一点&#xff0c;我创建了死锁的演示代码&#xff0c;展示了…

chrome插件2

转自&#xff1a;http://www.codeceo.com/article/15-chrome-extension.html 1. Web Developer 支持Chrome的Web Developer扩展&#xff0c;允许你通过添加一个小工具栏来使用不同的工具。 官方网站&#xff1a;https://chrome.google.com/webstore/detail/web-developer/bfbam…

java月历组件_vue之手把手教你写日历组件

---恢复内容开始---1.日历组件1.分析功能&#xff1a;日历基本功能&#xff0c;点击事件改变日期&#xff0c;样式的改变1.结构分析&#xff1a;html1.分为上下两个部分2.上面分为左按钮&#xff0c;中间内容展示&#xff0c;右按钮下面分为周几展示和日期展示3.基本结构页面ht…

maven project module 依赖项目创建 ---转

一、创建Maven Project 1.右击 --> New --> Other&#xff0c;--> Maven --> Maven Project --> Next 2.如下图&#xff0c;选中Create a simple project --> Next 3.输入Group Id, Artifact Id, Version, Packaging选择pom&#xff0c;因为创建的Maven Pr…

linux常见命令搜集

查找根目录下txt和pdf文件 find / \( -name "*.txt" -o -name "*.pdf" \) -print 正则查找根目录下所有的txt和pdf文件 find / -regex ".*\(\.txt|\.pdf\)$"查找所有非txt文本 find . ! -name "*.txt" -print制定搜索深度 find ~ -max…

需加装饰——装饰模式

装饰模式指的是在不必改变原类文件和使用继承的情况下&#xff0c;动态地扩展一个对象的功能。它是通过创建一个包装对象&#xff0c;也就是装饰来包裹真实的对象。 类图分析 我们先假设一个业务场景&#xff0c;有三种房子需要装修&#xff0c;分别是公寓&#xff0c;木屋和别…

Vue2.0 --- vue-cli脚手架中全局引入JQ

第一步&#xff1a;安装jQuery npm/cmpn方式安装(默认安装1.7.X版本的JQ) npm/cnpm install jQuery 如果想安装更高版本的JQ那么可以选择在package.json文件下面这个位置添加代码断&#xff08;当前图片安装的是2.2.3版本&#xff0c;如果想安装更高或者其他可以更改版本号&…

Unity——用UnityEditor拷贝FBX中的AnimationClip

最近有个新需求&#xff0c;要用代码添加动画的事件&#xff0c;但是Unity不能直接修改FBX中的AnimationClip 在Animation窗口中可以看到&#xff0c;AnimationClip是Read-Only状态&#xff0c;用代码修改这个AnimationClip也是不会生效的&#xff0c;包括用代码添加事件 解决方…

mvc如何嵌套第三方页面_长文观点丨为什么我不再使用MVC框架?

原创&#xff1a; 张卫滨 译 Jean-Jacques Dubray是一名资深工程师&#xff0c;他最近引入了一个新的模式&#xff1a;状态-行为-模(State-Action-Model&#xff0c;SAM)。SAM是一个函数式反应型的编程模式&#xff0c;它致力于简化数据Model和View之间的交互。它究竟有何优点值…

JSON和XML的区别

转载于:https://www.cnblogs.com/mr-wuxiansheng/p/6974239.html

屏幕适配

rem是什么&#xff1f; rem&#xff08;font size of the root element&#xff09;是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位&#xff0c;em&#xff08;font size of the element&#xff09;是指相对于父元素的字体大小…

【存储过程】MySQL存储过程/存储过程与自定义函数的区别

---------------------------存储过程-------------------- 语法: 创建存储过程: CREATE [definer {user|current_user}] PROCEDURE sp_name ([ proc_parameter [,proc_parameter ...]]) [ characteristics..] routime_body 其中: proc_parameter : [IN|OUT|INOUT] parameter_…

Java死锁故障排除和解决

JavaOne年度会议的一大优点是&#xff0c;主题专家介绍了几个技术和故障排除实验室。 其中的一个实验室今年特别吸引了我的注意力&#xff1a;“ HOL6500-查找和解决Java死锁 ”&#xff0c;由Java冠军Heinz Kabutz提出 。 这是我在该主题上看到的最好的演示之一。 我建议您自己…