CSS3规范中对背景这一部分,新加入了一些有用的功能,如可以设置多个背景图片、可以指定背景大小、设置背景渐变等功能。CSS3规范中定义的背景属性新增了background-clip、background-origin、background-size,这三个属性描述如表1:

表1  CSS3新增背景属性

1  多背景

CSS3允许设置多个背景图片,每个背景用逗号隔开,每个背景图片占一层,层的上下显示按照在CSS中写的顺序来定,最先写的背景在最上层。

多背景的格式如下:

background: url(a.jpg) 0 0,url(b.jpg) 0 100%;

这里,我们使用三个图片为div制作三层背景,第一种方法是背景的简写方式,代码如下:

上述代码为div设置了三层背景,每层的背景图片平铺方式设为不重复,第一层背景引用了“bg1.jpg”图片,位于该div“0 0”的位置;第二层背景引用了“bg2.jpg”图片位于“200px 0”的位置;第三层背景引用了“bg3.jpg”图片位于“400px 0”位置。在浏览器里运行的结果如图1所示:

图1  三层背景重叠

除了这种简写方法外,我们还可以将background属性拆分开来,使用background-image、background-repeat和background-position分别来设置背景图片的地址,平铺方式和位置,CSS代码如下:

这段代码就是对上面代码的一个改写,在浏览器里的执行效果一样。值得注意的是,背景渐变也是一种背景层。下面我们为div设置三层背景,第一层背景为背景渐变,第二层背景为背景图。CSS代码如下:

第一层为从左到右的“rgba(255,255,0,1)”到“rgba(255,0,0,0)”的渐变背景,第二层为“itxdl.jpg”的背景图。在浏览器里运行的结果如图2:

图2  背景渐变层

2  背景尺寸

CSS3还新增了背景尺寸background-size属性,该属性可以设置具体的值,百分比等。该属性的取值及描述如表2:

表2  背景尺寸属性取值及描述

当我们为background-size设置一个值时,那么第二个值会被设置为“auto”。若对背景图片设置两个值时未与背景图本身大小成比例,容易是图片失真或变形。

下面有一个高度和宽度为200px的div,而我们想要将一张宽高为600px的图片作为背景图。我们想要将该图片填充到这个div的话,若没有background-size的属性,我们就需要使用一些软件将这张图片压缩再为设置背景,否则背景图片会溢出。未使用background-size时,CSS代码如下:

在浏览器里运行的结果如图3:

图3  背景图片未使用background-size

在这里我们只能看到“itxdl2.jpg”的左上角的三分之一。在为该背景图片的background-size设置为“200px 200px”、“200px auto”、“auto 200px”、“cover”和“contain”都可以达到全填充的目的。例如,我们在这里使用“200px auto”,增加“background-size: 200px auto”,CSS代码如下:

在浏览器里运行的结果如图4:

图4  背景图片全填充

只有当background-size值为auto时,背景图片才不会变形失真,而其他值都会造成背景图片变形夫真,所以大家使用时需要仔细考虑好,以免给你的制作带来不良效果。

3  background-origin

CSS3可以使用background-orgin属性设置图像的基准位置。该属性的取值及描述如表3:

表3  background-origin属性取值及描述

该属性默认取值为“padding-box”,顾名思义,从图像的填充框开始绘制。指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置,你可以用这个属性在边框上绘制背景,但边框上的背景显不显示出来那就要由background-clip来决定了。background-clip在下面的内容会提到。

这里,我们将div的边框设为半透明,体现出边框,又体现出边框中的背景。将其的背景图的background-origin设置为border-box,将其边框设为半透明。这时图像从边框界开始填充,代码如下:

该div的背景图从边框开始绘制,在浏览器里运行的结果如图5:

图5  背景图片基准位置

4  background-clip

CSS3可以使用background-orgin属性规定背景的绘制区域。background-clip控制的不仅仅是背景图片,而是控制整个元素背景的显示范围。该属性的取值及描述如表4:

表4  background-origin属性取值及描述

该属性的默认取值为“border-box”。指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。

这里,我为div设置“padding: 10px”。将其背景图的background-clip设置为content-box。这时图像背景从边框界开始填充,CSS代码如下:

在浏览器里运行的结果如图6所示:

图6  背景图片规定绘制区域

IT兄弟连 HTML5教程 CSS3属性特效 CSS3背景的更多相关文章

  1. IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

    CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...

  2. IT兄弟连 HTML5教程 CSS3属性特效 小结及习题

    本章小结 CSS3新增了许多属性,CSS3样式新增了一种颜色模式rgba用来制作透明色,比CSS的颜色模式多了一个透明度的设置.文字的CSS3特效有文字阴影.文字描边.文字排版和文字省略等.另外,CS ...

  3. IT兄弟连 HTML5教程 CSS3属性特效 文字描边

    用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...

  4. IT兄弟连 HTML5教程 CSS3属性特效 动画-animation

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation.前面已经介绍过Transform和Transition了,这里我们来学习Animation动画.通 ...

  5. IT兄弟连 HTML5教程 CSS3属性特效 渐变1

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  6. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性5

    9  透明属性 元素透明也是我们常用的样式,在CSS2中使用滤镜属性opacity实现透明效果.现在有了CSS3的rgba属性,就不用这么麻烦了,当然这也得要浏览器支持才行.通常我们定义颜色都是用十六 ...

  7. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性4

    7  多列布局属性 通过CSS3,开发人员能够创建多列来对文本进行布局.在CSS2时代,对于多列布局的设计,大多采用浮动布局和绝对定位布局两种方式.浮动布局比较灵活,但是需要编写大量的附加样式代码,而 ...

  8. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性3

    5 用户界面属性 在CSS3中,新的用户界面特性包括重设元素尺寸.盒尺寸及轮廓等.本小节着重介绍一下resize属性,只有Firefox 4和Safari 3浏览器支持此属性.resize属性可用于重 ...

  9. IT兄弟连 HTML5教程 CSS3揭秘 CSS3属性2

    3  背景属性 在CSS3中提供了多个背景属性,这里只介绍两个比较常用的属性,其他属性可以从手册中获取帮助.在CSS3中,通过background-image或者background属性可以为一个容器 ...

随机推荐

  1. 2019-2020-7 20199317《Linux内核原理与分析》第七周作业

    第6章  进程的描述和进程的创建 1  进程的描述       操作系统内核实现操作系统的三大管理功能,即进程管理.内存管理和文件系统.其中,操作系统内核中最核心的功能是进程管理.为了管理进程,内核要 ...

  2. Anticancer Effect of Deuterium Depleted Water - Redox Disbalance Leads to Oxidative Stress(低氘水的抗癌作用-氧化还原失衡导致了氧化应激)-解读人:范徉

    期刊名:Molecular & Cellular Proteomics 发表时间:(2019年12月) IF:4.828 单位:瑞典卡罗林斯卡学院 物种:人 技术:标记定量蛋白质组学,氧化还原 ...

  3. 转:ETL讲解(很详细!!!)

    ETL讲解(很详细!!!) ETL是将业务系统的数据经过抽取.清洗转换之后加载到数据仓库的过程,目的是将企业中的分散.零乱.标准不统一的数据整合到一起,为企业的决策提供分析依据. ETL是BI项目重要 ...

  4. MySQL必知必会(组合Where子句,Not和In操作符)

    SELECT prod_id, prod_price, prod_name FROM products ; SELECT prod_id, prod_price, prod_name FROM pro ...

  5. springboot读取resource下的文件

    public static String DEFAULT_CFGFILE = ConfigManager.class.getClassLoader().getResource("conf/s ...

  6. Xcode10:The operation couldn’t be completed. (DVTCoreSimulatorAdditionsErrorDomain error 0.)

    目录 Xcode10 build success,但是模拟器Simulator不能正常启动,报错如下: 解决方案: Xcode10 build success,但是模拟器Simulator不能正常启动 ...

  7. 利用etcd实现服务注册和服务发现

    文章目录 服务注册 服务发现 协议编写 服务端实现 客户端实现 实验结果 参考文章 服务注册 主要逻辑在go func函数里面,先是去etcd获取一下服务,没有获取到的话就注册进去. package ...

  8. go基础之基本数据结构(数组、slice、map)

    go基本的数据结构有数组.slice.map,高级数据结构为结构体为用户自定义类型.本片文章主要讲解三大基本数据结构. 数组 slice Map 数组 数组是包含单个类型的元素序列,但是长度固定的数据 ...

  9. jquery (对内容,元素,属性,class的操作)

    对内容的操作: 捕获:获得内容 text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设置或返回表单字段的值. 设置:设置内容 ...

  10. ngxtop(nginx实时监控工具)

    原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/dea1ca3a-7 ...