background-image 、 background-color 、 background-origin 、 background-clip 、
background-repeat 、 background-size 、 background-position 、 background-attachment
background 属性与 CSS2中的用法基本相同,不过 CSS3允许在该属性中添加多个背景图像组,背景图像之间通过逗号进行分隔。其中 <bg-layer>
表示一个背景图像层。每个背景图像层都可以包含下面的值:
[background-image] | [background-color] | [background-origin] | [background-clip] |
[background-repeat] | [background-size] | [background-position]
| [background-attachment]
为了方便定义背景图像, background 属性又派生了 8个子属性。
background-color: 颜色英文单词 | 颜色的十六进制数 | 颜色的 rgb 值 | transparent
| inherit;
background-position : percentage | length;
background-position: left | right | center | top | bottom;
background-origin: border-box | padding-box | content-box;
WebKit 支持 -webKit-background-origin 私有属性, Mozilla Gecko 支持 -moz-background-origin 私有属性, Presto 引擎和 IE 浏览器支持标准属性。
iv {
height: 600px;
width: 416px;
border: solid 1px red;
padding: 120px 4em 0;
background: url(images/p3.jpg) no-repeat;
-moz-background-origin: border-box;
-webkit-background-origin: border-box;
background-origin: border-box;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
overflow: hidden;
}
background-attachment : fixed | scroll | local
background-clip : border-box | padding-box | content-box | text
WebKit 支持 -webKit-background-clip 私有属性, Mozilla Gecko 支持 -moz-background-clip 私有属性, Presto 引擎和 IE 浏览器支持该属性部分取值, Firefox 不支持 text 。
div {
height: 50px;
width: 200px;
border: solid 50px gray;
padding: 50px;
background: url(images/bg2.jpg) no-repeat;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
-moz-background-clip: content-box;
-webkit-background-clip: content-box;
-o-background-clip: content-box;
-khtml-background-clip: content-box;
background-clip: content-box;
}
background-size: [<length> | <percentage> | auto ]{1,2} | cover | contain
background-size 属性值初始值为 auto ,适用于所有的元素。
WebKit 支持 -webKit-backgroundsize 私有属性, Mozilla Gecko 支持 -moz-background-size 私有属性, Presto 引擎、 IE 浏览器支持标准属性
background-repeat : repeat-x | repeat-y | repeat | no-repeat | space | round
CSS Sprite 是一种图像处理技术,将零散的小图标整合在一起,形成一张大图 ,这张图可称为雪碧图或精灵图。当用这张大图做背景图像时,可以利用 background-position 属性进行背景定位,找到想要的小图标。这么处理图像,不但可以解决命名困扰,还能减少 HTTP 请求数和图像字节数,提升网页性能。但制作和维护这张雪碧图比较烦琐,当加一个小图标的时候,必须修改原图,还不能破坏原先图标的位置。
mix-blend-mode 属性规定元素的内容应如何与其直接父背景混合。
mix-blend-mode: normal | multiply | screen | overlay | darken | lighten |
color-dodge | color-burn | difference | exclusion | hue | saturation | color |
luminosity;
isolation 属性定义元素是否创建新的堆叠上下文。与 background-blend-mode 和 mix-blend-mode 一起使用时, isolation 属性很有用。
isolation: auto|isolate|initial|inherit;