CSS background 属性
background
是一种 CSS 简写属性,用于一次性集中定义各种背景属性,包括:background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size,和 background-attachment。
实例
如何在一个声明中设置所有背景属性:
<html>
<head>
<style type="text/css">
body
{
background: lightblue url("/images/img_tree.gif") no-repeat fixed center;
}
</style>
</head>
<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html>
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
属性 | |||||
---|---|---|---|---|---|
background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
注释:IE8 以及更早的浏览器不支持一个元素多个背景图像。
注释:IE7 以及更早的浏览器不支持 "inherit"。IE8 需要 !DOCTYPE。IE9 支持 "inherit"。
定义和用法
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
如果不设置其中的某个值,也不会出问题,比如 background:#ff0000 url(‘smiley.gif’); 也是允许的。通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
默认值: | not specified |
---|---|
继承性: | no |
版本: | CSS1 + CSS3 |
JavaScript 语法: | object.style.background="white url(paper.gif) repeat-y" |
可能的值
值 | 描述 | CSS |
---|---|---|
background-color | 规定要使用的背景颜色。 | 1 |
background-position | 规定背景图像的位置。 | 1 |
background-size | 规定背景图片的尺寸。 | 3 |
background-repeat | 规定如何重复背景图像。 | 1 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-clip | 规定背景的绘制区域。 | 3 |
background-attachment | 规定背景图像是否固定或者随着页面的其余部分滚动。 | 1 |
background-image | 规定要使用的背景图像。 | 1 |
inherit | 规定应该从父元素继承 background 属性的设置。 | 1 |
相关页面
CSS 教程:CSS 背景
CSS3 教程:CSS3 背景
HTML 教程:background 属性