在css中，可以用filter特性来调节图片颜色，比如：应用“filter:grayscale(%);”将图片设置为黑与白、“filter: sepia(%);”将图片设置为深褐色图象等。CSS的filter特性主要运用于设定图象的视觉效果。
本实例教程作业环境：windows7系统软件、CSS3&&HTML5版、Dell G3计算机。
在CSS中可以用filter特性，将相近Photoshop的转场特效用于图片里，改变图片颜色。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
img{
width: 300px;
}
.img1{
/*元素灰度值*/
/*考虑到兼容性设置：适配Chrome,Safari,Opera*/
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.img2{
/*将图像转换为深褐色图象*/
/*考虑到兼容性设置：适配Chrome,Safari,Opera*/
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.img3{
/*色彩转动*/
/*考虑到兼容性设置：适配Chrome,Safari,Opera*/
-webkit-filter:hue-rotate(55deg);
filter: hue-rotate(55deg);
}
.img4{
/*翻转原素*/
/*考虑到兼容性设置：适配Chrome,Safari,Opera*/
-webkit-filter: invert(100%);
filter: invert(100%);
}
</style>
</head>
<body>
<div class="demo">
<img src="img/1.jpg" class="img1"/>
<img src="img/1.jpg" class="img2"/>
<img src="img/1.jpg" class="img3"/>
<img src="img/1.jpg" class="img4"/>
</div>
</body>
</html>原照：
应用filter特性改变颜色
【强烈推荐实例教程：CSS视频教学 、html视频教学】
CSS filter特性
CSS的filter特性主要运用于设定图象的视觉效果。
词法：
filter: none|blur()|brightness()|contrast()|drop-shadow()|grayscale()|hue-rotate()|invert()|opacity()|saturate()|sepia()|url();
Filter 函数公式
留意： ps滤镜通常使用百分数 (如：75%), 当然你也可以应用低来描述 (如：0.75)。
none：这也是初始值，不适合一切实际效果。
brightness()：设定元素色度。假如色度为0％乃为黑色，假如色度为100％，又与初始色度同样。超过100％结论数值是更加光亮元素。
grayscale()：设定元素灰度值，这将原素颜色转换为黑色和白色。灰度值0％表明初始原素，100％表明彻底灰度值原素。
sepia()：这将图像转换为深褐色图象，在其中0％表明初始图象，100％表明彻底深褐色。
contrast()：用以调节元素饱和度。0％饱和度表明详细的白色原素，100％饱和度表明初始原素。
saturate()：用以设定元素对比度。0％对比度表明原素彻底不饱和脂肪，100％饱和状态表明初始图象。超过100％结论数值是超饱和原素。
blur()：这将模糊特效用于原素。假如未找到模糊不清值，则初始值为0。
opacity()：它设定图象却不清晰度实际效果。0％不透明度表明原素完全透明，假如不清晰度为100％，也表示初始图象。
hue-rotate()：这将色彩转动用于图象。该值界定将调节图像样本的色盘四周的近视度数。初始值为0deg，表明初始图象；该值尽管没有最高值，超出360deg数值等同于又绕一圈。
invert()：它翻转原素。初始值为0％，表明初始图象。100％使图象彻底翻转。
drop-shadow()：它对于原素运用阴影效果。它接纳h-shadow，v-shadow，blur，spread和color做为值。
url()：接纳一个XML文档，该文件设置权限 一个SVGps滤镜，且能够包括一个ps钢笔来规定一个具体ps滤镜原素。
大量程序编写基本知识，请访问：编程视频！！
以上就是关于css怎么改变图片颜色的具体内容，大量欢迎关注AdminJS其他类似文章！
声明：本文为原创，版权声明：本文采用[BY-NC-SA]协议进行授权,如无特别说明,转载必须注明本文地址!
原文地址：css怎么改变图片颜色发布于2023-03-05 16:48:01
