CSS3混合模式mix-blend-mode/background-blend-mode简介
mix-blend-mode
CSS3混合模式是在CSS2的基础上增加的新特性,用于控制在两个图层重叠时如何混合它们的颜色值。mix-blend-mode
属性控制元素的内容与其父元素的背景混合模式,它指定元素内容的混合方式,即将前景层和背景层的颜色进行混合。
混合模式的模式类型
混合模式支持多种类型,常用的包括:
- normal 混合模式保持不变,前景和背景颜色不混合
- multiply 以乘法方式混合两个图层的颜色值,产生比原色暗的颜色,常用于阴影和深色背景
- screen 以屏幕方式混合两个图层的颜色值,产生比原色亮的颜色,常用于滤镜效果
- overlay 根据背景色调整前景层的颜色,产生高光和阴影效果,常用于透明度的调整
- soft-light 根据前景层和背景层的颜色信息,调整背景层的颜色,产生柔和的效果,常用于柔化和润色效果。
- hard-light 根据前景层和背景层的颜色信息,调整背景层的颜色,产生较为硬朗的效果,常用于边缘和线条
- difference 将两个图层的颜色进行比较,产生反差的颜色效果。
- exclusion 只有当两个图层的颜色完全相同时,才能产生透明的效果。
混合模式的使用语法
.mix-class{
mix-blend-mode: normal;
}
混合模式的实际应用
下面是一个利用mix-blend-mode
属性和::before
内容块实现的柔和的“云雾”效果。代码中,mix-blend-mode: screen;
将背景色进行了屏幕混合,达到了柔和的“云雾”效果。
.background {
width: 100%;
height: 100vh;
position: relative;
background: #999;
}
.background::before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: #fff;
mix-blend-mode: screen;
opacity: 0.5;
border-radius: 9999px;
top: -5%;
left: -10%;
}
background-blend-mode
background-blend-mode
用于控制背景图片的混合模式。如果背景图片不是单一的颜色而是由多张图片合成的,则可以利用background-blend-mode
实现各种效果。该属性可以为添加的背景图层指定混合模式,从而实现更丰富的视觉效果。
混合模式的模式类型
与mix-blend-mode
相似,background-blend-mode
也支持多种混合模式类型。
混合模式的使用语法
.background-class{
background: url(xxx.png), url(xxx.png), ...;
background-blend-mode: normal;
}
混合模式的实际应用
下面是一个利用background-blend-mode
属性实现的百叶窗效果。代码中,背景图片由两张图组成,分别为assets/win-1.jpg
和assets/win-2.jpg
,根据不同的混合模式设置,形成了百叶窗效果。
.background {
height: 100vh;
background: url(assets/win-1.jpg), url(assets/win-2.jpg);
background-repeat: no-repeat, no-repeat;
background-blend-mode: exclusion, multiply;
background-size: auto 100%, auto 100%;
}
以上就是CSS3混合模式mix-blend-mode
和background-blend-mode
的简介以及它们的实际应用。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:CSS3混合模式mix-blend-mode/background-blend-mode简介 - Python技术站