CSS 属性
全部展开 | 全部折叠
CSS 规则

CSS background 属性

主题:CSS3 属性参考上一页|下一页

说明

background CSS 属性是一个简写属性,用于在单个声明中设置单个背景属性,即 background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clipbackground-color

下表总结了此属性的使用上下文和版本历史记录。

默认值: 查看个别属性
适用于: 所有元素
继承: No
动画: Yes, as some of the properties of the shorthand are animatable. 参见动画属性
版本: CSS 1, 2, 3

语法

属性的语法如下:

background [ image position/size repeat attachment origin clip color ] | initial | inherit

注意:如果上面列出的任何属性缺失或省略,将插入该属性的默认值(如果有)。 有关详细信息,请参阅各个属性。

下面的示例显示了 background 属性的作用。

body {
    background: #ffff00 url("smiley.png") no-repeat fixed center;
}

在 CSS3 中,您还可以为单个元素添加多个背景。 背景沿 z 轴相互叠加。

.box {
    width: 100%;
    height: 500px;
    background: url("images/birds.png") no-repeat center,  url("images/clouds.png")  no-repeat center, lightblue;
}

属性值

下表描述了该属性的值。

说明
background-attachment 
指定背景是随文档滚动,还是固定在查看区域。
background-color 设置元素的背景颜色。
background-clip 指定绘制背景的区域。
background-image 为一个元素设置一个或多个背景图像。
background-origin 指定背景图片的定位区域。
background-position 设置背景图片的初始位置。
background-repeat 指定背景图像在调整大小和定位后如何平铺。
background-size 指定背景图像的大小。
initial 将此属性设置为其默认值。
inherit 如果指定,则关联元素采用其父元素 background 属性的 计算值

浏览器兼容性

所有主要的现代浏览器都支持 background 属性。

Browsers Icon

基本支持—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 4+
  • Apple Safari 1+
  • Opera 3.5+

进一步阅读

请参阅以下教程: CSS 背景, CSS3 背景.

相关属性: background-attachment, background-color, background-clip, background-image, background-origin, background-position, background-repeat, background-size.

Advertisements