热搜:前端 nest neovim nvim

css怎么改变图片颜色

lxf2023-03-05 16:48:01

在css中,可以用filter特性来调节图片颜色,比如:应用“filter:grayscale(%);”将图片设置为黑与白、“filter: sepia(%);”将图片设置为深褐色图象等。CSS的filter特性主要运用于设定图象的视觉效果。

css怎么改变图片颜色

本实例教程作业环境: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>

原照:

css怎么改变图片颜色

应用filter特性改变颜色

css怎么改变图片颜色

【强烈推荐实例教程: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其他类似文章!