CSS3 层叠上下文与mix-blend-mode混合模式阻隔实例页面

回到相关文章 »

代码：

CSS代码：

.box {
    min-height: 256px;
    background-color: #0074D9;
}
.inner {
    width: 256px;
    height: 256px;
    background: url(mm1.jpg) no-repeat;    
}
.mode {
    position: relative;
    right: -100px;
    mix-blend-mode: darken;	
}

HTML代码：

<div class="box" style="">
    <div class="inner" style="">
        <img src="mm2.jpg" class="mode">
    </div>
</div>

效果：

此时竖图片妹子和蓝色背景色也发生混合。