教你如何用CSS修改图片颜色

到题目是不是吓了一跳？css竟然还有这个操作？还真是第一次听说~

原理嘛，其实很简单的，用到的就是 CSS3 滤镜filter中的drop-shadow，该滤镜可以给图片非透明区域添加投影。你可以理解为下图

它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。是有一点类似box-shadow，但是二者还是有显著差别的，我后面会写一篇专门的文章来比较二者的差别。

先来看一下语法：

filter:drop-shadow(水平阴影偏移距离垂直阴影偏移距离投射的阴影颜色 );

我们准备一张背景色是透明的图片(图片尺寸40px X 40px)，

用一个div将该图片包裹住，给图片添加

filter: drop-shadow(40px 40px yellow)

这段代码，代表投射出一个和该图片一样的形状，

三个参数分别代表：

水平向右移动40px，
垂直向下移动40px，
投射出的形状颜色为黄色。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                width: 40px;
                height: 40px;
                border: 1px solid red;
                margin: 200px auto;
            }
            .pic{
                filter: drop-shadow(40px 40px yellow);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="img/delete.png" class="pic"/>
        </div>
    </body>
</html>

效果为

接下来我们稍微更改一下原代码，将原图设置在div外部并隐藏，变色后的投影放置在div中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .box{
                width: 40px;
                height: 40px;
                border: 1px solid red;
                margin: 200px auto;
                text-indent: -40px;
                overflow: hidden;
            }
            .pic{
                filter: drop-shadow(40px 0px yellow);
            }
        </style>
    </head>
    <body>
        <div class="box">
            <img src="img/delete.png" class="pic"/>
        </div>
    </body>
</html>

如果想换成其他颜色，直接更改第三个参数就Ok了~是不是很简单

家好，我是龙仔。今天来聊一下前端中使用的SVG图片。都知道前端中使用的字体图标都是可以通过改变它的color属性来改变图标的颜色的。但是SVG图片如何快速的改变图片的颜色，而不必要引入另外一张不同颜色的SVG图片。今天就主要来实践一下到底如何来改变SVG图片的颜色。下面来看一下具体代码。

接下来就通过代码来改变一下SVG图片的颜色，具体来看一下代码如何实现。这里需要简单先说一下，这里是VO3的项目，使用SVG图片用到了Vita plug键、SVG icon这样的库。这个库可以很方便的使用SVG图标。这个库的一些具体细节大家可以参考官方的文档，看它是如何来使用的。

首先这里来看一下，这里就是使用SVG的图片，这里引用的是menuSVG这样的图标。现在可以看到它是黑色的，如何来实现？当鼠标移入上去让它呈现不同的颜色。这里先给大家来一个提供第一个方案，也是近期在项目中使用的方案。

其实在CSS中有一个属性是叫currentColor，是什么？就是当前元素。如果给它fill设置了currentColor，就会去取当前的标签的color属性。比如它是有一个style，style里面有一个color属性，就会取color属性。

fil是什么？file是SVG图标的填充颜色，比如现在是黑色的，可以看到刚才其实它就是一个000，它就是一个黑色的，正是因为它是000，所以它呈现了一个黑色的样式。

现在把它改成currentColor，就是让它来继承color属性的颜色。在这里用icon-Wrap包裹了一下svg图标。接下来就可以看一下，来给icon-Wrap定义一个color属性，并且在这个它有一个滑动的效果，就是滑上去的以后，鼠标滑上去以后，呈现一个其他另外一个颜色。

可以看到颜色已经生效了，最开始是一个红色的，当鼠标移上去以后，它变成了一个紫色的效果。这里主要的用到的知识点就是currentColor，它会继承color属性这样的效果，这样就没有必要在项目中同一个图标。

因为在项目中有很多地方都是最开始是一个不活跃的状态的颜色，当鼠标放上去以后，它是一个活跃状态的颜色，两个颜色是不一样的。如果是为了一个颜色的不同而去引入两个只有颜色不同的图标，这样就太浪费资源了。所以可以通过代码的形式改变cSS，直接来实现颜色的切换。

今天的分享就到这里，希望对大家有所帮助。

色，由三基色组成，各种说法不一，通常是指红（R）绿（G）蓝（B）三种颜色。

颜色值，由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。无论是RGB（0~255）表示，还是十六进制表示，他们其实表达的都是一样的。

提供个表格，给正在写HTML的你做个参考。三种颜色混合而成的具体效果：

仅有 16 种颜色名被 W3C 的 HTML 4.0 标准支持，它们是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。
故如果使用其它颜色的话，就应该使用十六进制的颜色值。

在线咨询

上一篇：程序员的开源月刊《HelloGitHub》第 68 期
下一篇：楼签到小程序制作

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

教你如何用CSS修改图片颜色

您的项目需求