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…

python正则表达式指南_Python正则表达式指南

1. 正则表达式基础1.1. 简单介绍正则表达式并不是Python的一部分。正则表达式是用于处理字符串的强大工具&#xff0c;拥有自己独特的语法以及一个独立的处理引擎&#xff0c;效率上可能不如str自带的方法&#xff0c;但功能十分强大。得益于这一点&#xff0c;在提供了正则表达…

Google Guava EventBus用于事件编程

在任何软件应用程序中都是如此&#xff0c;有些对象需要共享信息才能完成工作。 在Java应用程序中&#xff0c;实现信息共享的一种方法是拥有事件侦听器&#xff0c;其唯一目的是在发生所需事件时采取某些措施。 在大多数情况下&#xff0c;此过程有效&#xff0c;并且最有经验…

system类

package system.cn; /** system类的方法 都是静态方法&#xff0c;可以直接用类名直接调用* 常用的方法&#xff1a;* static long currentTimeMillis() 返回以毫秒为单位的当前时间。 static void exit(int status) 终止当前正在运行的 Java 虚拟机。 static void gc…

c await和java_blog/java/test/awaitility.zh.md at master · c-rainstorm/blog · GitHub

javaAtomicInteger atomic new AtomicInteger(0);// Do some async stuff that eventually updates the atomic integerawait().untilAtomic(atomic, equalTo(1));等待一个 AtomicBoolean 更简单&#xff1a;javaAtomicBoolean atomic new AtomicBoolean(false);// Do some a…

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

今天遇到个业务需求&#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…

java对hashmap迭代_Java:通过HashMap迭代,这样更有效率?

第二个选项肯定更有效&#xff0c;因为在第一个选项中只进行一次查找&#xff0c;次数为n次。但是&#xff0c;没有什么比尝试它更好&#xff0c;当你可以。所以这里 –(不完美&#xff0c;但足够好验证假设和我的机器)public static void main(String args[]) {Map map new H…

html-edm(邮件营销)编写规则

最近写了一个edm邮件 以前没有接触过 使用的是很老的html页面编写规则 只能用table标签 在此记录一下edm编写的一些规则 个人参考的是这两个网址&#xff0c;转载一下 http://www.zcool.com.cn/article/ZMTM5MDgw.html https://www.cnblogs.com/lhweb15/p/6404626.html …

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…

HTML5和css3

超链接 <a target"页面打开位置" href"链接地址">内容</a>target:_blank 重新打开一个页面target:_self 当前页面打开 1.页面地址&#xff1a; 基础功能&#xff0c;用于进入该链接的页面&#xff1b; 2.锚点&#xff1a; 需要给标签名定义id…

python下载显示文件丢失_Microsoft.PythonTools.resources.dll

我该如何安装从金山毒霸下载的DLL文件&#xff1f;一&#xff1a;1、从金山毒霸下载压缩文件。2、将DLL文件解压到电脑上的某个地方。3、把该文件跟要求使用它的程序放在同一路径上。注意32位程序需要使用32位的DLL文件&#xff0c;64位程序需要使用64位的DLL文件。否则会出现0…

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…

java soot_正确执行3个地址代码的SOOT API

我在运行SOOT API时遇到问题 . 我正在使用java -cp soot-2.5.0.jar soot.Main -f jimple test我遇到以下错误&#xff1a;Exception in thread "main" java.lang.RuntimeException: Could not load classfile: java.io.ObjectInputStream atat soot.coffi.Util.resol…