使用css3滤镜改变图片的颜色

我们在开发页面的时候，会遇到同一张图片滑过或点击的时候改变图片背景或颜色，一般情况下UI设计师会给我们两套图片，但是我们为了节约资源可以利用css3滤镜来做到改变图片背景或颜色。

例如

上图中的图片有两种颜色，一般UI会给两套图片，如果是需要节约资源UI只给了，一套图片需要前端自己去改变图片的颜色。所以在这里我们就用到了css3的滤镜 filter: drop-shadow

代码如下

<div class="ailine_item_box"><div class="ailine_item_img ailine_imgurl3"></div>
</div>

/* 图片设置背景图 */
.ailine_item_box{height: 100px;width: 100px;position: absolute;top: 87px;left: 134px;overflow: hidden;
}
.ailine_item_img{height: 92px;width: 100px;background-size: 100px 92px;position: relative;left: -100px;border-right: 100px solid transparent;-webkit-filter: drop-shadow(100px 0px #fff);filter: drop-shadow(100px 0px #fff);
}
.ailine_imgurl3{background: url('../img/ai-tu4.png') no-repeat 0 0;
}

这是通过filter: drop-shadow生成一个镜像，然后把原来的图片隐藏，保留生成的镜像，达到改变图片颜色。如果需要改变图片颜色字需要更改filter: drop-shadow的颜色值，如下

.ailine_item:hover .ailine_item_img{-webkit-filter: drop-shadow(100px 0px #D6A77B);filter: drop-shadow(100px 0px #D6A77B);
}

图片使用css3滤镜改变图片颜色相关推荐

html怎么改变图片亮度,纯干货，前端学者的福音！如何使用css滤镜改变图片颜色...
原标题:纯干货,前端学者的福音!如何使用css滤镜改变图片颜色说到对图片进行处理,我们经常会想到PS,美图秀秀这类的图像处理工具.作为前端,全栈开发者,我们经常会需要处理一些特效,例如根据不同的状态 ...
使用CSS3滤镜让图片反转颜色
CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...
ctf图片隐写中改变图片高和宽
ctf图片隐写中改变图片高和宽利用工具 Hex Editor Neo将图片进行十六进制分解, 然后我们可以找出该图片的像素高宽,转化成十六进制然后对应找到该像素点所在位置,进行修改即可.
c#图像处理、图片拼接、图片裁剪、图片缩放、图上添加形状、屏幕截图、图片反色、改变图片色彩度全解
全栈工程师开发手册 (作者:栾鹏) c#教程全解 using System; using System.Collections.Generic; using System.ComponentModel ...
css只设置背景图片半透明,css3实现背景图片半透明内容不透明的方法示例
上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示: 内容半透明内容不透明最常见的做法事设置元素的opacity,这种设置 ...
c语言调整图片分辨率,如何不改变图片分辨率，并且缩小图片质量-电脑自学网...
如何不改变图片分辨率,并且缩小图片质量呢?有时候我们上传一些证件照时,分辨率刚刚好,但是图片却太大了,那么该如何减小图标的大小呢?下面就给大家介绍分辨率不变,降低图片大小的操作方法. 操作方法: 1. ...
解决md导入CSDN中图片大小过大改变图片的大小
问题描述: 本人喜欢使用 typora 写笔记,但是每次一到上传博客就会变得十分头疼,尤其是图片的问题!!!比如我们现在上传一张图片: 这个图片的尺寸是不是太大了!!! 解决: 其实,当你拖入图片的时 ...
Python PIL调整图片大小、尺寸和转换图片格式，removebg改变图片背景、透明化处理
1.简介:Python利用PIL Image可以调整图片尺寸(宽度和高度).图片大小和转换图片格式,Python利用removebg可以改变图片背景.透明化处理. 2.特点:简单方便.快速. 3.适用 ...
html中怎样制作图片滚动,CSS3 制作的图片滚动效果
实现效果实现代码 html CSS3 @keyframes slidy { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { ...

图片使用css3滤镜改变图片颜色

图片使用css3滤镜改变图片颜色

使用css3滤镜改变图片的颜色

代码如下

图片使用css3滤镜改变图片颜色相关推荐

最新文章

热门文章