瞧瞧CSS3的混合模式
mix-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
isolation: auto | isolate
.isolation{
isolation:isolate;
}
<div class="mode">
<div class="mode-inner multiply">
<div class="mm">
<img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_example_girl.jpg" rel="external nofollow" rel="external nofollow" alt="" />
</div>
<div class="leaf"></div>
</div>
</div>
//第二幅图
<div class="mm isolation">
<img src="http://7s1r1c.com1.z0.glb.clouddn.com/t_example_girl.jpg" rel="external nofollow" rel="external nofollow" alt="" />
</div>
//第三幅图
<div class="leaf isolation"></div>
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
div{
background-image:url(http://7s1r1c.com1.z0.glb.clouddn.com/t_example_girl.jpg);
background-color:#0062CC;
background-blend-mode: multiply;
}
//背景与渐变色
.mode1 .mm{
background:radial-gradient(red,blue),url(http://7s1r1c.com1.z0.glb.clouddn.com/t_example_girl.jpg);
background-blend-mode: screen,multiply;
}
//背景与背景
.mode2 .mm{
background:url(http://7s1r1c.com1.z0.glb.clouddn.com/t_example_girl.jpg),url(http://7s1r1c.com1.z0.glb.clouddn.com/t_leaf.jpg);
background-blend-mode: screen,multiply;
}