利用css修改图标颜色

最近在写一个关于天气的小功能，发现一件有意思的事，我找到的图标颜色是黑色，所以使用之后效果例图如下：

但我想要的效果是这样的：

对于把图标颜色改变，我接触的只有css3里面的filter属性，filter滤镜中，有调整图像的对比度的contrast(%)，有调整色调的hue-rotate等等，把这些滤镜进行组合，进行色值变换，总会得到我们希望的颜色。
在这里，给大家推荐一个filter滤镜进行转换任意色的的在线工具。
点击这里进行跳转
则使用代码如下：
html

<span  id="weather-l"><img src="img/晴-天气.png" class="background-1"></span>

css

.background-1 {width: 100px;height: 100px;filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);
}

即可得到想要的效果，通过之前的在线工具，可任意改变想要的颜色值
以上所述，均参考自张鑫旭大佬的博客，链接如下
点击这里进行跳转
弱弱菜鸡，不知所言

利用css修改图标颜色相关推荐

纯css修改图标颜色的五种方式
原图我们以目标色红色为例,逐一看是如何实现的利用filter属性进行修改 1.filter:drop-shadow + transform 移位变色 <div class="img ...
html修改img图片颜色,教你如何用CSS修改图片颜色
原标题:教你如何用CSS修改图片颜色看到题目是不是吓了一跳?css竟然还有这个操作?还真是第一次听说~ 原理嘛,其实很简单的,用到的就是 CSS3 滤镜filter中的drop-shadow,该滤镜 ...
利用css修改svg图标颜色
步骤 1.将svg 标签的第一个fill改为 fill="currentColor" 2.将 path 里的 fill 属性删除这样svg图标颜色就会自动继承父元素的了
利用CSS改变图片颜色的100种方法！
(给前端大全加星标,提升前端技能) 来源: 前端指南前言 "说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具.作为前端开发者,我们经常会需要处理一些特效,例如根据不同 ...
html图片颜色变深,利用CSS改变图片颜色的100种方法！
前言 "说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具.作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色.或者是hover的时候, ...
css 修改placeholder颜色 , placeholder的样式设置
在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...
利用CSS改变图片颜色的多种方法！
前言 "说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具.作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色.或者是hover的时候 ...
如何用CSS修改图片颜色
filter:drop-shadow(水平阴影偏移距离垂直阴影偏移距离投射的阴影颜色 ); 对于透明背景的icon而言,这个很好使在原icon的侧面建立一个可以自定义颜色的投影,然后利用父元素的 ...
android 修改图标颜色
因为项目需求,需要把一部分不支持功能的小图标置灰. 拿到需求就开始找度娘,网上普遍说法是使用ColorMatrix进行setSaturation将饱和度设为0即可,但是我不知道是什么原因,可能我的图片 ...
windows11文件夹修改图标/颜色/样式教程
软件下载链接和提取码都放在文章最后下载完以后解压,打开之后选择需要的模块/样式,点击安装然后选择一个文件夹右键选择显示更多选项点击文件夹颜色/样式/图标选择要更改的主题即可更改完整视频查看(这是 ...

利用css修改图标颜色

利用css修改图标颜色

利用css修改图标颜色相关推荐

最新文章

热门文章