css3 图片颜色叠加--background-blend-mode
来源:互联网 发布:java彩虹六号安卓版 编辑:程序博客网 时间:2024/05/16 03:38
先创建一个DIV:<divclass="mul"></div>
给这DIV添加背景颜色和背景图片:
.mul{ margin: 0 auto; border: solid 1px red; width: 400px; height: 500px; background: #5bd5a0 url("su1.jpg") no-repeat center center/60% auto;}
现在我只用混合样式:
.mul{ margin: 0 auto; border: solid 1px red; width: 400px; height: 500px; background: #5bd5a0 url("su1.jpg") no-repeat center center/60% auto; background-blend-mode: multiply;}
混合模式有:
Multiply 正片叠底
Screen 滤色
Overlay 叠加
Darken 变暗
Lighten 变亮
Color dodge 颜色减淡
Color burn 颜色加深
Hard light 强光模式
Soft light 柔光模式
Difference 差值模式
Exclusion 排除模式
Hue 色相模式
Saturation 饱和度模式
Color 颜色模式
Luminosity 亮度模式
具体每一个的效果可以参考:http://www.webhek.com/css-blend-mode/
然后自己需要用的时候,可以在PS里先把自己想到模式找出来,再找到对应的样式来使用。
0 0
- css3 图片颜色叠加--background-blend-mode
- CSS3中的mix-blend-mode和background-blend-mode
- CSS3新特性: mix-blend-mode: multiply
- css3 mix-blend-mode 混合模式详解
- 使用blend改变图片颜色
- CSS3 background-size图片自适应
- iOS中使用blend改变图片颜色
- iOS中使用blend改变图片颜色
- iOS中使用blend改变图片颜色
- iOS中使用blend改变图片颜色
- iOS中使用blend改变图片颜色
- iOS中使用blend改变图片颜色
- iOS中使用blend改变图片颜色
- iOS中使用blend改变图片颜色
- iOS中使用blend改变图片颜色
- iOS中使用blend改变图片颜色
- iOS中使用blend改变图片颜色
- IOS-使用blend改变图片颜色
- window.getComputed浏览器兼容
- JVM之运行时数据区域
- 跟我一起学习MySQL技术内幕(第五版):(第三章学习日记14)
- stm32 学习经历—环境搭建 以103 407搭建 3/2
- 2012年寒假•青年基金【修改后发表】
- css3 图片颜色叠加--background-blend-mode
- jsp页面中c标签 运用
- SIM9000A SIM模块GPRS测试--记录这一路的喜乐
- 源码安装nginx
- POI的HSSFRichTextString的使用简介 .
- 故事版冲突The document "me.storyboard" could not be opened. Unrecognized file content.
- JAVA 求中文首字母(大小写)
- 编程规范 --- 可测性
- Ngios安装配置