CSS 允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果
一:背景色background-color 属性
p {background-color: gray;}
二:背景图像 background-image 属性
body {background-image: url(/i/eg_bg_04.gif);}
三:背景重复background-repeat 属性
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,
no-repeat 则不允许图像在任何方向上平铺
body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; }
四:背景定位background-position 属性
为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异
body { background-image:url(‘/i/eg_bg_03.gif‘); background-repeat:no-repeat; background-position:center; }
五:背景关联background-attachment 属性
body { background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed }
时间: 2024-10-07 09:16:47