css3笔记——增强的background属性

css3中增强了background属性,其值为[,]*。css3中容许使用多个背景图像,之间用逗号分割,表示为一个背景图像层,每个背景图像层中都可包含

[background-image] | [background-color] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position] | [background-attachment]

各自的意思为:

  • background-image:定义背景图片。
  • background-color:定义背景颜色。
  • background-origin:定义背景的显示区域。
  • background-clip:指定背景的裁剪区域。
  • background-repeat:设置背景图像是否以及如何重复铺排。
  • background-size:设置背景图片的大小。
  • background-position:设置背景图片的位置。
  • background-attachment:设置背景图像的显示方式。

css3中新增的background子属性为background-origin,background-clip和background-size,查看demo

一,定义背景图的坐标原点——background-origin

在默认情况下background-position属性总是以左上角为坐标原点进行背景定位。而background-origin属性可以改变这种定位的方式。

background-origin的值有:

  • border-box:从边框区域开始显示背景。
  • padding-box:从内边距开始显示背景,默认值。
  • content-box:仅在内容区域显示背景。

注意,对于background-origin属性,css3规范有过变化,之前background-origin的值为border,padding和content,因此有些早期的文章或者书籍中介绍此属性都用得是老的值,经过测试最新版本的浏览器(chrome,和ff)对两种值的支持不一样(如下图)或查看demo。

[![background-origin](http://hicdn.qiniudn.com/wp-content/uploads/2012/10/background01.jpg "background-origin")](http://hicdn.qiniudn.com/wp-content/uploads/2012/10/background01.jpg)background-origin
由图可知,两个浏览器都支持标准写法border-box(对于background-origin:border的写法两个浏览器均已不支持),chrome的私有属性下border值仍然支持,ff的新版已经放弃使用私有属性,因此-moz-background-origin:border;在新版本的浏览器中已经失效,对于下面background-clip值亦是如此。 **因此安全的做法是两种值,和浏览器私有前缀均写上。** 下面是其他两个值的浏览器(注意图中文字图片和边框的位置)呈现:
[![background-origin](http://hicdn.qiniudn.com/wp-content/uploads/2012/10/background02.jpg "background-origin")](http://hicdn.qiniudn.com/wp-content/uploads/2012/10/background02.jpg)background-origin
二,定义背景图的裁切方式——css3中background-clip。 background-clip定义了背景图的裁切区域,与background-origin的值相同。 - no-clip:从边框向外裁切。 - border-box:从边框向外裁切。 - padding-box:从内边距裁切。 - content-box:从内容区域开始裁切。 background-clip和background-origin的属性相同,前者定义的是背景图的裁切后者是背景图的定位,若背景图从边框处就开始(origin),但是将内容区域以外的区域裁切(clip),则其最终的浏览器呈现为:
[![background](http://hicdn.qiniudn.com/wp-content/uploads/2012/10/background04.jpg "background")](http://hicdn.qiniudn.com/wp-content/uploads/2012/10/background04.jpg)background
三,定义背景图的大小——background-size css3属性background-size定义了背景图的显示大小,值有两个,第一个指定了背景图的宽度,第二个指定了背景图的高度,若只有一个,则默认第二个值为auto,background-size可选的值有: - ,长度值,不可为负值。 - ,百分值,不可为负。 - cover,指保持背景图片本身的长宽比例,将图片缩放到正好覆盖所定义背景的区域。 - contain:指保持背景图片本身的长宽比,见图片缩放到宽度或者高度整好适应所定义背景区域。 background-size的属性很容易理解,如图示不同值下的浏览器呈现(图中例子的属性依次为:100px 180px | 100px | cover | contain):
[![background-size](http://hicdn.qiniudn.com/wp-content/uploads/2012/10/background05.jpg "background-size")](http://hicdn.qiniudn.com/wp-content/uploads/2012/10/background05.jpg)background-size

xiaodao

0

Subscribe to cc log

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!
comments powered by Disqus