Dorissun 2015-12-28
一.背景色
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为红色:
p {background-color: red}
如果希望背景色从元素中的文本向外少有延伸,只需增加一些内边距:
p {background-color: red; padding: 20px}
二.背景图像
要把图像放入背景,需要使用 background-image 属性。background-image 属性的默认值是 none,表示背景上没有放置任何图像。
如果需要设置一个背景图像,必须为这个属性设置一个 URL 值:
body {background-image: url(/image/liang.gif);}
三.背景重复
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
默认地,背景图像将从一个元素的左上角开始。
1.水平重复
body { background-image: url(/image/liang.gif); background-repeat: repeat-x; }
2.垂直重复
body { background-image: url(/image/liang.gif); background-repeat: repeat-y; }
3.任何方向都不重复
body { background-image: url(/image/liang.gif); background-repeat: no-repeat; }