July 4, 2007
CSS扫盲(四): background
距上一期的《CSS扫盲(三): 怎样插入一个样式表》又是一个月了, 今天我们讨论的是CSS中的背景: background.
设置网页元素的背景色
对background-color属性赋颜色值, 可以是"white", "red"这样的英文单词, "#FFFFFF"这样的十六进制颜色代码, 还可以是类似于"rgb(255,255,255)"的RGB值. 如果想使用透明背景呢?
background-color: transparent;
设置背景图片
把背景图片地址写入单引号中替换掉url.
background-image: url('url');
当我们想使用某个图案作为背景的时候, 需要告诉浏览器重复显示这个图案布满整个背景, 那就这样做
background-repeat: repeat;
如何只想在竖直方向或水平方向重复呢, 把repeat值改为repeat-y或repeat-x好了.
还有种情况, 我只想叫图片显示一次, 不需要重复, 那就写这行代码告诉浏览器吧.
background-repeat: no-repeat
图片显示的位置在哪里呢?
background-position: center
上面这行代码表示图片的位置在页面正中央. 还可以使用其它值:
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y% (百分比)
xpos ypos (坐标值)
当滚动页面的时候, 叫背景图片仍然固定在原处, 不随页面一起滚动, 只需把背景图片设置为固定附件.
background-attachment: fixed;
相应的, 赋值scroll代表滚动.
看到这里, 大家一定觉得要分别设置这么多相当麻烦, 其实在CSS中这些值可以写在同一行中, 如同:
background: #00FF00 url('smiley.gif') no-repeat fixed center;
好了, 到这里就基本介绍完了background, 大家有什么要补充的请给我留言! 
fisio at 14:09 Jul 04, 2007 ₪
还可以用坐标值，呵呵，学到了
d at 15:27 Mar 26, 2008 ₪
ddddd