CSS背景属性用于定义元素的背景样式。CSS 背景这里指通过CSS对对象设置背景属性,如通过CSS设置背景各种样式。
CSS样式为一个元素的背景提供若干属性,如:background-color
,background-image
,background-repeat
,background-attachment
和background-position
。下一节将介绍如何使用这些属性为背景一一设置不同的样式。
background-color
属性用于设置元素的背景色。
下面的示例演示如何设置网页的背景色。
body {background-color: #f0e68c;}测试看看‹/›
CSS中的颜色通常由以下方法指定:
十六进制值-例如“#ff0000”
RGB值-例如“ rgb(255,0,0)”
颜色名称-如“红色”
查看CSS颜色名称以获取可能颜色名称的完整列表。
background-image
属性将图像设置为HTML元素的背景。
请参见下面的示例,该示例演示如何设置页面的背景图像。
body {background-image: url("leaf.jpg");}测试看看‹/›
默认情况下,该background-image
属性在水平和垂直方向上都重复图像。
通过使用background-repeat
属性,您可以控制如何在html元素的背景中平铺背景图像。您可以设置垂直(y轴),水平(x轴),双向或双向重复的背景图像。
请参见下面的示例,该示例演示了如何通过水平重复切片的图像来设置网页的渐变背景。
body { background-image: url("gradient.png"); background-repeat: repeat-x; }测试看看‹/›
background-attachment
属性确定背景图像相对于视口是固定的还是随包含块一起滚动。
body { width: 250px; height: 200px; overflow: scroll; background-image: url("recycle.jpg"); background-attachment: fixed; }测试看看‹/›
background-position
属性用于控制背景图像的位置。
如果未background-position
指定,则图像将放置在元素的默认左上位置,即(0,0)
。请参阅以下示例:
body { background-image: url("tree.jpg"); background-repeat: no-repeat; }测试看看‹/›
在下面的示例中,背景图像位于右上角,并且图像的位置由background-position
属性指定。
body { background-image: url("tree.jpg"); background-repeat: no-repeat; background-position: 100% top; }测试看看‹/›
从上面的示例中可以看到,处理背景时需要考虑许多属性。也可以在一个属性中指定所有这些属性,以缩短代码。这称为速记属性。
的background
属性是用于设置所有单独的背景属性(即,缩写属性background-color
,background-image
,background-repeat
,background-attachment
和background-position
)在一次。例如:
body { background-color: #f0e68c; background-image: url("smiley.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: 250px 25px; }测试看看‹/›
使用速记符号,上面的示例可以写成:
body {background: #f0e68c url("smiley.png") no-repeat fixed 250px 25px;}测试看看‹/›
使用background
简写属性时,属性值的顺序应为。
背景:彩色 图像 重复 附属 位置 ;
如果使用速记符号时缺少或未指定单个背景属性的值,则将使用该属性的默认值(如果有)。
注意: background属性不会继承,但是由于CSS属性的初始(即默认)transparent
值,默认情况下,父元素的背景将始终可见background
。