053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

用css3制作出photoshop的背景图片混合效果教程

时间:2014-08-15

用css3制作出photoshop的背景图片混合效果教程
我们通常处理网页背景图片 都是用photoshop制作好了 然后css调用即可。 css3出来之后, 我们可以直接用css3的样式 直接混合出 photoshop的效果背景。下面看看教程


创建背景和选择混合效果
 
开始,我们首先需要创建一个以上背景使用„背景”属性。添加背景只是通过comma-separating他们在后台定义。后来使用属性„background-blend-mode”定义混合效果。
 
 
body {
  background: url("wolken.jpg"), url("burg.jpg");
  background-blend-mode: multiply;}
 

 
左原件,右边正片叠底后的效果图片



这个列子我们对两个图片应用了multiply  混合方式 ,我们也可以针对不同图片应用不用他混合方式
body {
  background: url("wolken.jpg"), url("burg.jpg");
  background-blend-mode: lighten, normal;
}


当然多个图片 可以分别应用不同混合方式
body {
  background: url("wolken.jpg"), url("burg.jpg"), url("sonstwas.jpg");
  background-blend-mode: lighten, multiply, normal;
}

还可以使用图片和颜色混合 看看下面列子
body {
  background: url("wolken.jpg"), red;
  background-blend-mode: lighten, normal;
}

这种css3混合方式在Chrome 35+, Firefox 30+ and Opera 22+  等浏览器都支持。感兴趣可以自己写css代码测试一下。这里就不多说了,你可以举一反三。至于ie什么版本支持,本人没有测试,有测试在下面留言回复,共同探讨学习。

相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP