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如何改变图片颜色的详细内容,更多请关注龙方网络其它相关文章!

郑重声明:本文版权包含图片归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们(delete@yzlfxy.com)修改或删除,多谢。

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

留言与评论(共有 0 条评论)
昵称:
匿名发表
   
验证码: