CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(2)CSS3利用图层叠加实现多背景_html/css_WEB-ITnose
程序员文章站
2022-05-01 20:55:32
...
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所示。
最后来个书的封面图吧,有学习的一起交流
上一篇: php添加文章部分代码求解解决方案
推荐阅读
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(2)CSS3利用图层叠加实现多背景_html/css_WEB-ITnose
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(3)线性渐变_html/css_WEB-ITnose
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(3)线性渐变_html/css_WEB-ITnose
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(2)CSS3利用图层叠加实现多背景_html/css_WEB-ITnose
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(5)使用放射渐变制作光影效果_html/css_WEB-ITnose
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(4)构造尺寸更灵活的背景_html/css_WEB-ITnose
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(4)构造尺寸更灵活的背景_html/css_WEB-ITnose
-
【原创】CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(5)使用放射渐变制作光影效果_html/css_WEB-ITnose
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(1)设定背景图_html/css_WEB-ITnose
-
CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation 读书笔记(5)使用放射渐变制作光影效果_html/css_WEB-ITnose