css3实现背景图片颜色修改的多种方式

2024年04月02日 18:48:41益点益滴592

css3可以改变图片的颜色了。从此再也不用设计出多张图,而且随时可以修改。下面就简单介绍下css3中是如何做到改变背景图片的颜色效果的。

方式一:利用css3滤镜filter中的 drop-shadow

代码如下:

  <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>

说明:

drop-shadow 滤镜可以给元素或图片非透明区域添加投影

将背景透明的 PNG 图标施加一个不带模糊的投影,就等同于生成了另外一个颜色的图标

再通过 overflow:hidden 和位移处理将原图标隐藏

mix-blend-mode 取值情况:【除了最后3个,大体和ps效果一样】

  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

代码如下:

  <style>  .icon{      display: inline-block;      width: 180px;      height: 180px;      background-image: url($'img/XXX.png'), linear-gradient(#f00, #f00);      background-blend-mode: lighten;      background-size: cover;  }  </style>  <i class="icon"></i>  

说明:

lighten这个混合模式:变亮、变亮模式与变暗模式产生的效果相反,黑色比任何颜色都要暗,所以黑色会被任何色替换掉。反之,如果素材的底色是黑色,主色是白色。那就应该用变暗(darken)的混合模式  。

linear-gradient(#f00,  #00f )还可以实现渐变颜色的效果哦。 

总结:

方式一局限于png格式的图片,方式二不限制图片的格式。

css3具有一定的兼容性。chrome、Firefo、移动端较为适合使用。

如果css3实现背景图片颜色修改的多种方式没有解决您的问题,您还可以在CSS栏目中查看更多相关内容。

超赞,真给力!嗯,必须鼓励~

打赏 0
账号:mxy310@163.com[复制]
账号:77940140[复制]