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. Java基础知识笔记（七：接口、变量作用域和参数传递）

    一.接口 Java语言不允许一个子类拥有多个直接父类,即任何子类只能有一个直接父类.但允许一个类实现多个接口,即在定义类的接口名称列表中可以包含1个或多个接口名称,从而实现多重继承的特性.接口的定义格 ...

  2. 洛谷11月月赛round.1

    太感动了#2 thwfhk 240 (801ms) 100 100 40   又一张明信片,话说10月的怎么还没收到   P2246 SAC#1 - Hello World(升级版) 题目背景 一天, ...

  3. jdbcTemplate之jdbc模板技术

    1:为什么要使用jdbcTemplate? 在实际开发中使用jdbc技术太过复杂,为了减少代码冗余,操作简单 步骤一:创建实体类 package beans; public class Book { ...

  4. IIS7.5使用web.config设置伪静态的二种方法(转)

    近几天公司里开发的项目有几个运行在IIS7.5上,由于全站采用的是伪静态,因此从网上找到两两种方法来实现.这两种方法各有优势:第一种比较灵活,只要把文件拷到根目录下,即可直接显示所有伪静态页面(适用于 ...

  5. HTML5 -入门 (---css样式-------------（css基础与css选择器）---------------------—）

    ---恢复内容开始--- 一css基础入门与css选择器 CSS英文全拼:cascading style sheet 层叠样式表. 在html中使用:要在head中写style标签,所有样式放在sty ...

  6. Python list

    序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型,但最常见的是列表和元组. 序列 ...

  7. Intelij IDEA解决Dependency无法更新问题

    在使用Intelij IDEA的时候,发现核心的组件没有被更新,于是发现了这篇文章可以解决这个问题: Force Intellij IDEA to reread all maven dependenc ...

  8. 【.NET实战教程】北风网基于ASP.NET多层架构下的企业级进销存软件全程培训

    .Net进销存系统详细课程大纲(开发工具采用VS2008+sqlsever2005) [小编提醒:现在学习的话,可以使用vs2012+sql 2008 学习的是思路,教学环境不一定要一模一样]1.项目 ...

  9. Heap堆的理解以及在IAR中如何设置堆的大小

    文章首发于浩瀚先森博客 堆栈的概念在脑海里已经存在有一段时间了,今天就测试来整理下Heap堆.栈以后再说. 堆区不像全局变量和局部变量总是有指定的内存大小,它是为了在程序运行时动态分配内存而设定的一块 ...

  10. Caliburn.Micro学习笔记(一)----引导类和命名匹配规则

    Caliburn.Micro学习笔记目录 用了几天时间看了一下开源框架Caliburn.Micro 这是他源码的地址http://caliburnmicro.codeplex.com/ 文档也写的很详 ...