您的位置：首页 - 代码 - CSS教程 - 正文
CSS扫盲(四): background
作者：未知 文章来源：hellobmw.com 发布时间：2007-08-02 22:00:48
设置网页元素的背景色
对background-color属性赋颜色值, 可以是"white", "red"这样的英文单词, "#FFFFFF"这样的十六进制颜色代码, 还可以是类似于"rgb(255,255,255)"的RGB值. 如果想使用透明背景呢?
程序代码1
background-color: transparent;

设置背景图片
把背景图片地址写入单引号中替换掉url.
程序代码2
background-image: url('url');

当我们想使用某个图案作为背景的时候, 需要告诉浏览器重复显示这个图案布满整个背景, 那就这样做
程序代码3
background-repeat: repeat;

如何只想在竖直方向或水平方向重复呢, 把repeat值改为repeat-y或repeat-x好了.

还有种情况, 我只想叫图片显示一次, 不需要重复, 那就写这行代码告诉浏览器吧.
程序代码4
background-repeat: no-repeat

图片显示的位置在哪里呢?
程序代码5
background-position: center

上面这行代码表示图片的位置在页面正中央. 还可以使用其它值:

引用内容1
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y% (百分比)
xpos ypos (坐标值)

当滚动页面的时候, 叫背景图片仍然固定在原处, 不随页面一起滚动, 只需把背景图片设置为固定附件.
程序代码6
background-attachment: fixed;

相应的, 赋值scroll代表滚动.

看到这里, 大家一定觉得要分别设置这么多相当麻烦, 其实在CSS中这些值可以写在同一行中, 如同:
程序代码7
background: #00FF00 url('smiley.gif') no-repeat fixed center;

好了, 到这里就基本介绍完了background, 大家有什么要补充的请给我留言!

原文：http://hellobmw.com/archives/css-background.html
热门文章
最新文章