CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记(2)CSS3利用图层叠加实现多背景
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

CSS 3允许设置多个背景图片,每个背景图片占一层,层的上下按照在CSS中书写的顺序来定,最先写的背景在最上层,每层图片定义使用英文逗号隔开。

例如下面的代码:

background:url(http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat,
  url(http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat,
 url("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-repeat;

根据代码可以看到,每张图片都可以设置各自的位移、大小、是否重复,如果出现重叠,那么写在前面的图片会覆盖在最上层。

多背景的效果如图5.4所示。

enter image description here

好了,是不是很简单,有兴趣的我们可以一起学习交流,封面就不给了,大家自己搜吧,上思维图每天自省!

enter image description here

评论
发表评论
6年前
赞了此文章!
6年前
赞了此文章!
6年前
赞了此文章!
WRITTEN BY
90后玩时尚技术
喜欢前端技术,最热爱jquery和js,CSS一般,HTML一般。
TA的新浪微博
PUBLISHED IN
前端技术推荐、笔记、后悔药

我说的你可以不信 我写的你可以不看 但是你说的我都会看

我的收藏