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

我就是我 2024-04-06 10:45 50阅读 0赞

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

![f7896439cdea974c7e20c229e3032e51.jpeg][]

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

![949fdab71bbff44b7333d5e30c4e8671.jpeg][]

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

先来看一下语法：

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

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

![68bafbc3189b65b759d3d79010999273.png][]

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

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

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

三个参数分别代表：

> 水平向右移动40px，

> 垂直向下移动40px，

> 投射出的形状颜色为黄色。

<!DOCTYPE html>

<html>

<head>

.box\{

width: 40px;

height: 40px;

border: 1px solid red;

margin: 200px auto;

.pic\{

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

</style>

</head>

<body>

</div>

</body>

</html>

效果为

![1d0b45ee8488282cb0202aa6ffee8372.jpeg][]

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

<!DOCTYPE html>

<html>

<head>

.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>

</body>

</html>

![dfd7abd6bb59e59fb6cc4a037b679083.jpeg][]

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

![75d667cb297820224016db0440c6a191.jpeg][]

[f7896439cdea974c7e20c229e3032e51.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/6b5bb8b72802464aab5b7c6fea98f1e6.jpeg
[949fdab71bbff44b7333d5e30c4e8671.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/23700489ced24f4e8a7b0d0456f6b135.jpeg
[68bafbc3189b65b759d3d79010999273.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/fde9aeb5bff648ec8fa60a61209a1ce2.png
[1d0b45ee8488282cb0202aa6ffee8372.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/acf196e841bd434ba0ba6f84900426bf.jpeg
[dfd7abd6bb59e59fb6cc4a037b679083.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/1ad2535e4cba4652b18aacb6ee10572a.jpeg
[75d667cb297820224016db0440c6a191.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/bd5da181179d42b5a7e13083e8b9e064.jpeg