QQ登录

只需要一步,快速开始

APP扫码登录

只需要一步,快速开始

查看: 2765|回复: 0

[HTML/CSS/JS] css3实现背景图片颜色修改的多种方式

[复制链接]

等级头衔

积分成就    金币 : 2861
   泡泡 : 1516
   精华 : 6
   在线时间 : 1328 小时
   最后登录 : 2026-7-17

丰功伟绩

优秀达人突出贡献荣誉管理论坛元老活跃会员

联系方式
发表于 2021-4-14 17:05:35 | 显示全部楼层 |阅读模式
       css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。/ {# G$ b& Z' b0 U6 [2 H
方式一:利用css3滤镜filter中的 drop-shadow" _5 q$ w9 E9 X) f
       代码如下:! s% @% c3 y8 Q
<style>
.icon{
    display: inline-block;
    width: 180px;
    height: 180px;
    background: url('img/XXX.png') no-repeat center  cover;
    overflow: hidden;
}
.icon:after{
    content: '';
    display: block;
    height: 100%;
    transform: translateX(-100%);
    background: inherit;
    filter: drop-shadow(144px 0 0 #fff); //需要修改的颜色值
}
</style>
 
<i class="icon"></i>
说明:" w; M  k' r; C& o- g
       drop-shadow 滤镜可以给元素或图片非透明区域添加投影,将背景透明的 PNG 图标施加一个不带模糊的投影,就等同于生成了另外一个颜色的图标,再通过 overflow:hidden 和位移处理将原图标隐藏。; @, x5 F) F* O  F1 |8 y5 f( v% C; y
       mix-blend-mode 取值情况:【除了最后3个,大体和ps效果一样】
- F1 c+ O) U: o/ d0 P6 P& p
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; // 还原
方式二:利用css3的mix-blend-mode 和 background-blend-mode* ~6 y1 X- c3 s/ g9 s# n
       代码如下:
# ^# i4 Z; b) |# ]1 l
<style>
.icon{
    display: inline-block;
    width: 180px;
    height: 180px;
    background-image: url(说明:
       lighten这个混合模式:变亮、变亮模式与变暗模式产生的效果相反,黑色比任何颜色都要暗,所以黑色会被任何色替换掉。反之,如果素材的底色是黑色,主色是白色。那就应该用变暗(darken)的混合模式  。
       linear-gradient(#f00,  #00f )还可以实现渐变颜色的效果哦。 
[b]总结:[/b]
       方式一局限于png格式的图片,方式二不限制图片的格式。css3具有一定的兼容性。chrome、Firefo、移动端较为适合使用。

img/XXX.png'), linear-gradient(#f00, #f00);
    background-blend-mode: lighten;
    background-size: cover;
}
</style>
<i class="icon"></i>
说明:2 {1 I% L! l2 _$ t
       lighten这个混合模式:变亮、变亮模式与变暗模式产生的效果相反,黑色比任何颜色都要暗,所以黑色会被任何色替换掉。反之,如果素材的底色是黑色,主色是白色。那就应该用变暗(darken)的混合模式  。
- U* Z4 F' A1 j8 n  M3 H8 y" Z# z       linear-gradient(#f00,  #00f )还可以实现渐变颜色的效果哦。 ' _( u7 x; T6 w. S
总结:6 l0 O' {' M& J1 A1 ?5 C: F8 O
       方式一局限于png格式的图片,方式二不限制图片的格式。css3具有一定的兼容性。chrome、Firefo、移动端较为适合使用。0 E! U; c2 P  e+ \8 C
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|paopaomj.COM ( 渝ICP备18007172号|渝公网安备50010502503914号 )

GMT+8, 2026-8-18 18:31

Powered by paopaomj X3.5 © 2016-2025 sitemap

快速回复 返回顶部 返回列表