CSS background 属性

示例

在一个声明中设置不同的背景属性：

body {
background: lightblue url("img_tree.gif") no-repeat fixed center;
}

亲自试一试 »

定义和用法

这个backgroundproperty 是以下属性的简写：

如果缺少上述值之一也没关系，例如：background:#ff0000 url(smiley.gif);被允许。

展示演示❯

默认值：	查看各个属性
遗传：	不
可动画：	是的，查看各个属性。阅读可动画的尝试一下
版本：	CSS1 + CSS3 中的新属性
JavaScript 语法：	对象.style.background="red url(smiley.gif) top left no-repeat"尝试一下

浏览器支持

表中的数字指定完全支持该属性的第一个浏览器版本。

Property
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 像素高。

笔记：如果使用多个背景图片源但还需要背景颜色，则背景颜色参数需要位于列表中的最后。

属性值

Value	Description	CSS	Demo
background-color	Specifies the background color to be used	1	Demo ❯
background-image	Specifies ONE or MORE background images to be used	1	Demo ❯
background-position	Specifies the position of the background images	1	Demo ❯
background-size	Specifies the size of the background images	3	Demo ❯
background-repeat	Specifies how to repeat the background images	1	Demo ❯
background-origin	Specifies the positioning area of the background images	3	Demo ❯
background-clip	Specifies the painting area of the background images	3	Demo ❯
background-attachment	Specifies whether the background images are fixed or scrolls with the rest of the page	1
initial	Sets this property to its default value. Read about initial	3
inherit	Inherits this property from its parent element. Read about inherit	2

码农教程 - 一技在手,衣食无忧!

CSS background 属性

示例

定义和用法

浏览器支持

CSS 语法

属性值

相关页面