吾亦烦

【Web前端】CSS样式：背景

*本文介绍CSS样式中的背景属性（本文内容结合W3C教程编写）

背景属性

属性：background-color

所有元素都可以设置背景色，从body到a、em等行内元素。背景色不能被继承，没有设置背景色的元素背景是透明的，这样父元素的背景色才能看到。

p{background-color: gray;}

属性：background-image

背景图像通常应用到body上，但也可以应用到其他元素，比如p、a。背景图像同样不能被继承，事实上所有背景属性都不能被继承。

设置背景图像需要为这个属性设置一个url：

body{background-image: url(/前端/Images/op.jpg);}

如果背景图像没有显示成功，可能是路径不正确，建议使用绝对路径定位图像文件。

属性：background-repeat

如果不设置背景重复属性，则默认是平铺。可选属性值有：

body{background-repeat: no-repeat;}

属性：background-position

背景定位设置背景图像在元素中的位置，定位的属性值有3种：关键字、百分数、长度值。

关键字

使用top、bottom、left、right、center对背景图像定位，关键字是相对于元素而言的。

比如，top right表示将图像设置在元素的右上角。

关键字没有先后顺序，top right和right top是一样的，但最多只能设置两个关键字。

如果只有一个关键字，则默认另一个关键字为center。

h1{background-position: right top;}

百分数

假设，元素的左上角用百分数表示为0% 0%，则居中就是50% 50%，右下角是100% 100%。

如果想用百分数将背景图像定位为居中，则用百分数设置属性值为50% 50%，即图像50% 50%的点和元素50% 50%的点重合了。第一个百分数表示水平方向，第二个表示垂直方向。

如果只提供一个百分数，该百分数会被认为是水平值，垂直值默认是50%。

body{background-position: 50% 50%;}

长度值

长度值是以元素左上角为原点的偏移量，单位为像素（px）。

50px 100px解释为图像的左上角以元素左上角为原点，向右移动50px，向下移动100px，负值则方向相反。

body{background-position: 50px 100px;}

背景关联

属性：background-attachment

设置背景图像跟随文档滚动抑或固定，属性值：scroll、fixed、inherid

p{background-attachment: fixed;}

background-attachment属性值
属性值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
inherid	规定应该从父元素继承 background-attachment 属性的设置。

在一个背景中设置所有属性

body
{ 
    background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}