css怎样改变图片颜色

css更改图片颜色的办法：1、应用【mix-blend-mode】方式进行选值；2、根据【background-blend-mode: lighten】这一混合模式完成改变图片行为主体色调灰黑色为其他色调的效果。

本实例教程作业环境：windows7系统软件、css3版，DELL G3计算机。

css更改图片颜色的办法：

1、首先我们来了解一下mix-blend-mode 选值状况

mix-blend-mode: normal; // 正常的

mix-blend-mode: multiply; // 正片叠底

mix-blend-mode: screen; // 正片叠底

mix-blend-mode: overlay; // 累加

mix-blend-mode: darken; // 发暗

mix-blend-mode: lighten; // 调亮

mix-blend-mode: color-dodge; // 色调降低

mix-blend-mode: color-burn; // 颜色变色

mix-blend-mode: hard-light; // 强光照

mix-blend-mode: soft-light; // 柔光灯

mix-blend-mode: difference; // 误差

mix-blend-mode: exclusion; // 清除

mix-blend-mode: hue; // 色彩

mix-blend-mode: saturation; // 对比度

mix-blend-mode: color; // 色调

mix-blend-mode: luminosity; // 色度

mix-blend-mode: initial; // 默认设置

mix-blend-mode: inherit; // 传承

mix-blend-mode: unset; // 复原

这种大概和ps中一致，除开最终三个

2、运用background-blend-mode，大家可以在照片下累加多一层深颜色，根据background-blend-mode: lighten这一混合模式完成改变图片行为主体色调灰黑色为其他色调的效果。简单 CSS 编码提示如下所示：

.pic {
width: 200px;
height: 200px;
background-image: url($img);
background-size: cover;
}
.pic1 {
background-image: url($img), linear-gradient(#f00, #f00);
background-blend-mode: lighten;
background-size: cover;
}

有关免费学习强烈推荐：javascript视频教学

以上就是关于css怎样改变图片颜色的具体内容，大量欢迎关注AdminJS其他类似文章！