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. Appium学习实践（五）遇到的坑（记录自己工作中遇到的坑以及解决方案，不定时更新）

    1.错误截图,有时候测试用例执行错误的话,相对于复杂的log,一张错误截图也许能更明确哪里出的问题(当然有时,截图+log还是最好了) 坑:本来是想测试用例fail的时候捕获异常来执行截图操作,但是由 ...

  2. django博客功能实现——标签功能

    标签功能添加流程 0.功能概括 标签作为文章中的分类标记,会显示出该文章是关于哪一方面的文章,比如是关于python的还是关于django的. 当我们点击该标签的时候,会出现该博客中所有属于该标签的文 ...

  3. PHP的魔法方法__set() __get()

    php的魔法方法__set()与__get() Tags: PHP 我们先来看看官方的文档如何定义他们的: public void __set(string $name, mixed $value); ...

  4. jquery的各种隐藏显现动画的区别

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8&quo ...

  5. 配置Jenkins使用Gitlab的代码库进行构建

    1. 首先确认Jenkins上安装了Git plugin, 以及Subversion plugin Manage Jenkins -> Plugin Manager -> Availabl ...

  6. php 时间加减

    <?php date_default_timezone_set('PRC'); //默认时区 echo "今天:",date("Y-m-d",time() ...

  7. 微信快速开发框架（八）-- V2.3--增加语音识别及网页获取用户信息，代码已更新至Github

    不知不觉,版本以每周更新一次的脚步进行着,接下来应该是重构我的代码及框架的结构,有朋友反应代码有点乱,确实如此,当时写的时候只是按照订阅号来写的,后来才慢慢增加到支持API接口.目前还在开发第三方微信 ...

  8. ADC

    ADC转换分为两种通道组 1.规则通道组 2.注入通道组(可打断规则通道组) 工作模式 通道模式 转换模式 复位校准 AD校准

  9. npm 使用记录

    在 Mint 下安装 pencil,折腾半天,发现它对 firefox 的支持,只到 46.0 .本来打算研究下怎么用 xulrunner 来跑 pencil 这个 web 应用,查看项目资源的时候, ...

  10. JBoss 系列十四：JBoss7/WildFly如何加载外部的文件或properties文件

    http://www.tuicool.com/articles/M7ZR3y 原文 http://blog.csdn.net/kylinsoong/article/details/12623997 主 ...