网站地图    收藏   

主页 > 专题教程 > css >

mix-blend-mode

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] CSS mix-blend-mode用于指定一个元素与它下面元素的相交部分的混合模式。...

CSS mix-blend-mode用于指定一个元素与它下面元素的相交部分的。

当两个元素相互重叠的时候,它们之间会有一个相交的区域,这个区域称为backdrop。如下图所示:

两个图层相重叠示意图

mix-blend-mode属性可以对backdrop区域进行混合处理。在CSS中,有16种。默认的混合模式取值为normal。当混合模式的取值不是normal的时候,会为元素创建一个新的堆叠上下文,形成一个新的分组。这个分组中的内容将使用指定的混合模式进行混合。

如果你希望分组中的某个元素不进行混合,可以通过属性来指定。属性的作用是用于隔离一组元素,使这组元素不和它们的背景进行混合。

mix-blend-mode属性只用于对一个元素的颜色和它的backdrop进行混合。如果你想使一个元素和它的背景进行混合,可以使用属性。

下面展示了16种混合模式的效果:

16种CSS3混合模式效果示意图

官方语法
mix-blend-mode: <blend-mode>
                            

参数:

  • <blend-mode>:指定混合模式。参考数据类型的介绍。

mix-blend-mode属性的初始值为normal

应用范围

mix-blend-mode属性可以应用在所有元素上。在SVG中,该属性可以应用在容器元素,图形元素和图形引用元素上。

示例代码
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;                              
                            

下面示例使用两张图片进行混合。使用的两张图片如下:

背景图片
用于混合的底部背景图片
金鱼图片
顶部金鱼图片

对这两张图片进行混合,得到如下的结果:

使用混合模式混合后的图片
使用混合模式混合后的图片效果
在线演示

下面的例子是上面示例代码的实际效果。

<div class="container">
    <img src="img/bg.jpg">
    <img src="img/goldfish.jpg" class="source">
</div>                              
                            
.container{
  position: relative;
  width: 100%;
  max-width: 800px;
  margin:0 auto;
  padding: 20px;
}
.container img{
  width: 100%;
  max-width: 100%;
}
img.source{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0.7;
  mix-blend-mode: overlay;
}                              
                            
背景 金鱼
浏览器支持

mix-blend-mode属性的浏览器兼容性列表如下:

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论