我的位置: 首页  >   揭秘CSS  >   4.5.2 背景图像

4.5.2 背景图像

编辑:比特教程网    时间:2018-10-12 14:41    


除了背景颜色,也可以使用背景图像来实现各种复杂、有趣的背景效果。CSS中,使用 background-image属性来定义背景图像的路径,取值为 none | url,默认值为 none。

url 可以是相对路径,也可以是绝对路径。使用相对路径时,url 是相对于 css 所在的文件,而不是要设置样式的HTML文件。如,下面代码表示,使用 css 文件所在目录下的 img 文件夹下的图像 bg.gif 作为背景图像:

div {
 width: 200px;
 height: 200px;
 background-image: url(img/bg.gif);
}

默认情况下,背景图像会在水平方向和垂直方向重复,以填满整个容器。假如有一幅图案 bg.gif,其尺寸为 100px * 100px。如图 4‑25 所示:

背景图案

图4-25  背景图案

由于容器 div的尺寸为 200px * 200px,如果把图案 bg.gif 作为容器 div 的背景,则背景会在水平方向和垂直方向各重复两次,显示效果如图 4‑26 所示:

背景图像

图4-26  背景图像



上一节:4.5.1 背景颜色

下一节:4.5.3 背景重复