CSS 背景图片和背景颜色融合,以及多张背景图片融合显示
来源:互联网 发布:嵌入式软件 大公司 编辑:程序博客网 时间:2024/06/09 23:07
写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先把图片做好了直接给前端使用,方法是新建图层,填充颜色,然后设置不透明度。
- CSS 背景图片和背景颜色融合,以及多张背景图片融合显示
- css背景图片和背景颜色一起显示
- textarea背景图片|背景颜色
- 设置UINavigation的背景图片和背景颜色
- 设置navigationController的背景颜色和背景图片
- 设置UINavigation的背景图片和背景颜色
- 关于背景颜色与背景图片
- CSS控制表格背景图片不重复显示&Discuz板块背景
- QWidget的背景颜色和背景图片的设置
- QWidget的背景颜色和背景图片的设置
- QT入门-主窗口设置背景颜色和背景图片
- QWidget的背景颜色和背景图片的设置
- iOS 8 设置导航栏的背景颜色和背景图片
- QWidget的背景颜色和背景图片的设置
- QWidget的背景颜色和背景图片的设置
- background---背景颜色和背景图片填充的范围
- QT 给WIdget设置 背景图片和背景颜色
- C# 如何给Word文档设置背景颜色和背景图片
- Nginx的配置文件nginx.conf
- 代理模式——详解静、动态代理
- Shader中表达式和控制语句
- 驱动层双机调试,文件保护,进程保护
- Thinkphp框架的重定向问题
- CSS 背景图片和背景颜色融合,以及多张背景图片融合显示
- [bigdata-63] ssh连接超时问题解决
- Guava官方文档-RateLimiter类
- 在线编辑器
- 深度学习检测方法梳理
- log4j重写JDBCAppender 解决单引号问题
- The SDK Build Tools revision (23.0.3) is too low for project ':app'. Minimum required is 25.0.0
- hzau1201——Friends(树形DP)
- YOLO: Real-Time Object Detection