CSS background 属性
❮ 上一个 完整的 CSS 参考 下一个 ❯
示例
在一行声明中设置不同的背景属性
body { background: lightblue url("img_tree.gif") no-repeat fixed center;
}
自己动手试一试 »
定义和用法
background 属性是以下属性的简写属性：
background-color
background-image
background-position
background-size
background-repeat
background-origin
background-clip
background-attachment
即使缺少上面的一些值也是允许的，例如：background:#ff0000 url(smiley.gif); 是允许的。
查看演示 ❯
默认值
查看单个属性
继承
no
可动画
是的，查看单个属性。 阅读关于可动画属性 Try it
版本
CSS1 + CSS3 中的新属性
JavaScript 语法
object.style.background="red url(smiley.gif) top left no-repeat" Try it
浏览器支持
表中的数字指定了完全支持该属性的第一个浏览器版本。
属性
background
1.0
4.0
1.0
1.0
3.5
注意：请参阅下方各个值的浏览器支持情况。
CSS 语法
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
注意： 如果简写声明中的属性之一是 bg-size 属性，则必须使用 / (斜杠)将其与 bg-position 属性分开，例如：background:url(smiley.gif) 10px 20px/50px 50px; 将会得到一个背景图像，位置在距离左侧 10 像素，距离顶部 20 像素，图像的大小将是 50 像素宽和 50 像素高。
注意： 如果使用多个 background-image 源但还想设置 background-color，则 background-color 参数需要放在列表的最后。
属性值
值
描述
CSS
演示
background-color
设置要使用的背景颜色
1
演示 ❯
background-image
设置要使用的一个或多个背景图像
1
演示 ❯
background-position
设置背景图像的位置
1
演示 ❯
background-size
设置背景图像的大小
3
演示 ❯
background-repeat
设置背景图像的重复方式
1
演示 ❯
background-origin
设置背景图像的定位区域
3
演示 ❯
background-clip
设置背景图像的绘制区域
3
演示 ❯
background-attachment
设置背景图像是固定的还是随页面滚动
1
initial
将此属性设置为其默认值。阅读关于initial
3
inherit
从其父元素继承此属性。阅读关于inherit
2
相关页面
CSS 教程：CSS 背景，CSS 背景（进阶）
HTML DOM 参考：background property
❮ 上一个 完整的 CSS 参考 下一个 ❯
★ +1
W3schools 学习路径
跟踪您的进度 - 免费！
登录 注册