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. POJ 1325 Machine Schedule——S.B.S.

    Machine Schedule Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 13731   Accepted: 5873 ...

  2. python使用you-get模块下载视频

    pip install you-get # 安装先 怎么用    进入命令行: you-get url 暂停下载:ctrl + c ,继续下载重复  you-get url 官网地址:https:// ...

  3. 在MySQL中出现Unknown column 'abc' in 'field list'怎么解决？

    update TABLE1 set NAME = '?' where  ID  ='?' 参数字段需要添引号.

  4. C#.NET 大型企业信息化系统集成快速开发平台 4.2 版本 - 防止暴力破解密码、提高大型信息系统安全

    几十万人使用的系统.覆盖全国.每天营业额上好几个亿的.若信息安全方面太薄弱了.那将会是致命的打击.甚至威胁到企业的正常运转.从国家层面到企业级别大家都在重视信息的安全.可控. 运行速度慢一点点可以忍受 ...

  5. JSON.net 在实体类中自定义日期的格式

    定义日期格式转换类,其继承 IsoDateTimeConverter,代码如下: public class DateTimeConverter : IsoDateTimeConverter { pub ...

  6. EasyUI datagrildview导出excel报表

    $.extend($.fn.datagrid.methods, { toExcel: function(jq, filename){ return jq.each(function(){ var ur ...

  7. c3p0数据源的使用初步及Mysql8小时问题解决

    原文:http://blog.csdn.net/xby1993/article/details/23707775 c3p0号称是java界最好的数据池. c3p0的配置方式分为三种,分别是 1.set ...

  8. 格雷码原理与Verilog实现

    格雷码原理 格雷码是一个叫弗兰克*格雷的人在1953年发明的,最初用于通信.格雷码是一种循环二进制码或者叫作反射二进制码.格雷码的特点是从一个数变为相邻的一个数时,只有一个数据位发生跳变,由于这种特点 ...

  9. 利用phpize 外挂php扩展

    如果你的php是手动编译安装的 ,可能有一些扩展一开始并没有开启,以后需要某扩展的时候又不想重新编译php,使用phpize可以动态添加扩展 以Ubuntu为例, 如果你是我这样安装php的  apt ...

  10. Photon服务器进阶&一个新游戏的出产（二）

    继续上个文章说~ 接收其他人发过来的广播,在OnEvent中进行响应 比如说接收过来加入的消息 public void OnEvent(EventData eventData) { Debug.Log ...