写CSS的时候会遇到这样一个需求,要求给背景图片加上一个“遮罩层”,看起来更符合页面的整体风格。
可以用背景图片和背景颜色融合来解决。
通常我们这样写:
.bgDiv {
background:rgba(255, 0, 0, 0.1), url(...);
}
这样的写法的问题是,只有在图片覆盖不到的区域才能看到背景颜色,或者png图片的透明部分,才能看到。
这样达不到我们的要求,就需要另外的方法解决了,添加background的一个属性,background-blend-mode:multiply;
background-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; 复原
/* One value */
background-blend-mode: normal;
/* Two values, one per background */
background-blend-mode: darken, luminosity;
/* Global values */
background-blend-mode: initial;
background-blend-mode: inherit;
background-blend-mode: unset;
参考档案:https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode
除了这个还有另外一个方法,利用css背景渐变:
.bgDiv {
background:linear-gradient(bottom, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1)), url(...);
}
很奇怪,但是有用。
当然还有方法就是用PS先把图片做好了直接给前端使用,方法是新建图层,填充颜色,然后设置不透明度。