利用CSS改变图片颜色的100种方法!简单的 css 改变图片颜色


当我们在做项目的时候,经常有许多个icon 图片两个或更多个颜色的版本,下面切图网教你,怎么用简单的css改变图片的颜色。

熟悉PS的人都应该知道混合模式,css3中也有两个与混合模式相关的属性,mix-blend-mode 和 background-blend-mode

首先我们来了解一下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中一致,除了最后三个。

background-blend-mode 这个是背景的混合模式。这个可以是背景图片间的混合,也可以是背景图片和背景颜色的混合。

现在我们使用 background-blend-mode: lighten 实现任意图片颜色赋色技术吧。

假设我们有这样一张图片,JPG、PNG、GIF 都可以,但是有一个前提要求,就是黑色纯色,背景白色

利用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;

}

效果如下:

注意,上面

CSS 这一句是关键 background-image: url($img), linear-gradient(#f00,

#f00);,这里我叠加了一层渐变层linear-gradient(#f00, #f00),实现了一个纯红色背景,而不是直接使用 #f00

实现红色背景。

现在解释一下lighten这个混合模式。变亮,变亮模式与变暗模式产生的效果相反:

1、 用黑色合成图像时无作用,用白色时则仍为白色。

2、 黑色比任何颜色都要暗,所以黑色会被任何色替换掉。反之,如果素材的底色是黑色,主色是白色。那就应该用变暗(darken)的混合模式。

兼容性

相较于 mix-blend-mode,background-blend-mode 的兼容性会更好一点。所以本文所介绍的技术在移动端是存在用武之地的:


热门文章

  • 体育总局冬运中心关于公示第十四届全国冬季运动会冬季两项项目参赛运动员名单的函
  • 中国滑雪协会关于发布全国滑雪俱乐部精英联赛(吉林站)竞赛规程的通知
  • 体育总局冬运中心关于第十四届全国冬季运动会冬季两项项目替换运动员的通知
  • 体育总局冬运中心关于公布第十四届全国冬季运动会单板滑雪U型场地等项目决赛参赛运动员名单的通知
  • 体育总局冬运中心关于公布第十四届全国冬季运动会冬季两项项目参赛运动员名单的通知
  • 体育总局冬运中心关于取消举办2023-2024赛季全国冬季两项冠军赛的通知
  • 体育总局冬运中心关于选派裁判员参加2023-2024赛季单板滑雪平行项目全国冠军赛暨国际雪联FIS积分赛的函
  • 中国滑雪协会关于全国滑雪俱乐部精英联赛(吉林站)的补充通知
  • 2023-2024赛季全国跳台滑雪冠军赛竞赛规程
  • 2023-2024赛季全国高山滑雪冠军赛竞赛规程
  • 体育总局冬运中心关于选派2023-2024赛季全国高山滑雪锦标赛暨第十四届全国冬季运动会高山滑雪资格赛技术官员的函
  • 体育总局冬运中心关于发布2023-2024赛季全国自由式及单板滑雪U型场地冠军赛竞赛规程的通知
  • 体育总局冬运中心关于发布2023-2024赛季全国自由式及单板滑雪大跳台和坡面障碍技巧冠军赛竞赛规程的通知
  • 体育总局冬运中心关于公示第十四届全国冬季运动会越野滑雪项目参赛运动员名单的函
  • 体育总局冬运中心关于公示第十四届全国冬季运动会自由式滑雪空中技巧、雪上技巧项目决赛参赛运动员名单的通知