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所示。

最后来个书的封面图吧，有学习的一起交流

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（2）CSS3利用图层叠加实现多背景的更多相关文章

  1. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图

    技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...

  2. 【原创】CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（5）使用放射渐变制作光影效果

    阴影效果通常用来表现光线投射在物体上的感觉,如果想制作一个如图5.19所示的文字光影效果,就可以使用背景的线性渐变进行构建. 图5.19可以看到有类似光束照射文字的效果,很好地突出了文字.这实现起来很 ...

  3. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（4）构造尺寸更灵活的背景

    相比传统的图片背景来说,使用CSS构造背景色不仅可以降低网络传输的开销,更由于其尺寸的可控性受到开发者的青睐. 如设计师设计了一张背景图片作为标题背景,如图5.18所示.对于用电脑浏览网页的用户来说, ...

  4. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（3）线性渐变

    线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear ...

  5. 《Python高效开发实战》实战演练——内置Web服务器4

    <Python高效开发实战>实战演练——开发Django站点1 <Python高效开发实战>实战演练——建立应用2 <Python高效开发实战>实战演练——基本视图 ...

  6. 《Python高效开发实战》实战演练——基本视图3

    在完成Django项目和应用的建立后,即可以开始编写网站应用代码,这里通过为注册页面显示一个欢迎标题,来演示Django的路由映射功能. 1)首先在djangosite/app/views.py中建立 ...

  7. 《Python高效开发实战》实战演练——建立应用2

    为了在项目中开发符合MVC架构的实际应用程序,需要在项目中建立Django应用.每个Django项目可以包含多个Django应用.建立应用的语法为: #python manage.pystartapp ...

  8. 《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用

    8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目 ...

  9. <c ss高效开发实战>看完了，Bootstrap学习是关键

    Bootstrap果真给我们带来了很多便利,学习CSS,必须要掌握很多框架和快速学习的方法. 这本书看完了,也写过几篇读书笔记,墙裂推荐.不上书封面了,只上书的导图. 这里说几点学习CSS的心得 1. ...

随机推荐

  1. Entity Framework 6 with MySql

        MySQL Connector/Net 6.8.x MySQL Server 5.1 or above Entity Framework 6 assemblies .NET Framework ...

  2. BI建模原则和常见问题

    BI建模的质量直接影响数据仓库项目的质量,所以在建模前,要对数据仓库的架构组成.大小以及模型功能有明确的定义. 影响BI数据仓库建模的因素众多,往往会随着项目的具体情况不同而变化.但有些原则是相通的, ...

  3. 【原】移动web动画设计的一点心得——css3实现跑步

    今年3月份,由于公司业务需要,我转岗到微信产品部,离开了TID团队,人都是有感情的动物,更何况在一个团队呆了快 3 年,心中十分舍不得,鬼哥说了“天下没有不散的宴席...”,在我的世界里又多了一次离别 ...

  4. 嵌入式Linux驱动学习之路(十一)按键驱动-中断机制

    轮询方式: 和led驱动不同的是在配置IO引脚的时候,把LED的输出引脚换成输入,在read函数中向外发送io的状态.必须由应用程序不断的来查询当前IO口的状态来判断. 中断方式: /* file n ...

  5. JS实现Observable观察者模式

    欢迎讨论与交流 : ) 注 代码参考自——汇智网 RxJS教程 前言 Observable观察者模式令小白笔者眼前一亮.数据生产者(observable)负责生产新鲜的数据,同时在生产完毕后'通知“消 ...

  6. Javascript四舍五入(Math.round()与Math.pow())

    代码 Code highlighting produced by Actipro CodeHighlighter (freeware) http://www.CodeHighlighter.com/ ...

  7. LeetCode:N-Queens I II（n皇后问题）

    N-Queens The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no tw ...

  8. C#软件设计——小话设计模式原则之：依赖倒置原则DIP

    前言:很久之前就想动笔总结下关于软件设计的一些原则,或者说是设计模式的一些原则,奈何被各种bootstrap组件所吸引,一直抽不开身.群里面有朋友问博主是否改行做前端了,呵呵,其实博主是想做“全战”, ...

  9. Sort using in VS

  10. IIS安装

    引自:http://www.cnblogs.com/Joans/archive/2012/07/16/2593828.html