4.2 设计背景图像样式
下面学习如何使用CSS设计背景图像的显示样式。
4.2.1 定义背景图像
视频讲解
在CSS中可以使用background-image属性来定义背景图像。具体用法如下。
background-image：none | <url>
默认值为none，表示无背景图；<url>表示使用绝对或相对地址指定背景图像。
提示：GIF格式的图像可以设计动画、透明背景等，图像小巧，而JPG格式的图像具有更丰富的颜色数，图像品质相对要好，PNG类型综合了GIF和JPG两种图像的优点。
【示例】如果背景包含透明区域的GIF或PNG格式图像，则被设置为背景图像时，这些透明区域依然被保留。在本示例中，先为网页定义背景图像，然后为段落文本定义透明的GIF背景图像。显示效果如图4.10所示。
<style type="text/css">
html, body, p{ height:100%;}
body {background-image:url(images/bg.jpg);}
p { background-image:url(images/ren.png);}
</style>
<p></p>
图4.10 透明背景图像的显示效果
4.2.2 定义显示方式
视频讲解
CSS使用background-repeat属性控制背景图像的显示方式。具体用法如下。
background-repeat：repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
取值说明如下。
☑ repeat-x：背景图像在横向上平铺。
☑ repeat-y：背景图像在纵向上平铺。
☑ repeat：背景图像在横向和纵向平铺。
☑ round：背景图像自动缩放直到适应且填满整个容器，仅CSS3支持。
☑ space：背景图像以相同的间距平铺且填满整个容器或某个方向，仅CSS3支持。
☑ no-repeat：背景图像不平铺。
【示例】本示例设计了一个公司公告栏，其中宽度是固定的，但是高度可能会根据正文内容进行动态调整，为了适应这种设计需要，不妨利用垂直平铺来进行设计。
第1步，把“公司公告”栏目分隔为上、中、下3块，设计<div id="call_tit">和<div id="call_btm">为固定高度，而中间块<div id="call_mid">可以随时调整高度。设计的结构如下。
<div id="call">
<div id="call_tit">公司公告</div >
<div id="call_mid"></div >
<div id="call_btm"></div >
</div>
第2步，所实现的样式表如下，最后调整中间块元素的高度，以形成不同高度的公告牌，演示效果如图4.11所示。
图4.11 背景图像垂直平铺示例模拟效果
4.2.3 定义显示位置
视频讲解
在默认情况下，背景图像显示在元素的左上角，并根据不同方式执行不同的显示效果。为了更好地控制背景图像的显示位置，CSS定义了background-position属性来精确定位背景图像。
background-position属性取值包括两个值，分别用来定位背景图像的x轴、y轴坐标，取值单位没有限制。具体用法如下。
background-position：[ left | center | right | top | bottom | <percentage> | <length> ] | [ left | center | right |
<percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> |
<length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
默认值为0% 0%，等效于left top。
【示例】本示例利用4个背景图像拼接起来组成一个栏目版块，这些背景图像分别被定位到栏目的4条边上，形成一个圆角矩形，并富有立体感，效果如图4.12所示。
图4.12 背景图像定位综合应用
示例所用到的HTML结构代码如下。
<div id="explanation">
<h3><span>这是什么？</span></h3>
<p class="p1"><span><span class="first">对</span>于网页设计师来说应该好好研究<acronym
title="cascading style sheets">CSS</acronym>。Zen Garden致力于推广和使用CSS技术，努力激发和鼓励您的灵
感和参与。读者可以从浏览高手的设计作品入门。只要选择列表中的任一个样式表，就可以将它加载到这个页
面中。<acronym title="hypertext markup language">HTML</acronym>文档结构始终不变，但是读者可以自由地
修改和定义<acronym title="cascading style sheets">CSS</acronym>样式表。</span></p>
<p class="p2"><span><acronym title="cascading style sheets">CSS</acronym>具有强大的功能，可以自
由控制HTML结构。当然读者需要拥有驾驭CSS技术的能力和创意的灵感，同时亲自动手，用具体的实例展示
CSS的魅力，展示个人的才华。截至目前，很多Web设计师和程序员已经介绍过许多关于CSS应用技巧和兼
容技术的各种技巧和案例。而平面设计师还没有足够重视CSS的潜力。读者是不是需要从现在开始呢？
</span></p>
</div>
根据这个HTML结构所设计的CSS样式表如下，请注意背景图像的定位方法。
在上面的样式表中，分别为不同元素定义背景图像，然后通过定位技术把背景图像定位到对应的4条边上，并根据需要运用平铺技术实现圆角区域效果。
注意：百分比是最灵活的定位方式，同时也是最难把握的定位单位。
在默认状态下，定位的位置为（0% 0%），定位点是背景图像的左上顶点，定位距离是该点到包含框左上角顶点的距离，即两点重合。
如果定位背景图像为（100% 100%），定位点是背景图像的右下顶点，定位距离是该点到包含框左上角顶点的距离，这个距离等于包含框的宽度和高度。
百分比也可以取负值，负值的定位点是包含框的左上顶点，而定位距离则由图像自身的宽和高来决定。
CSS还提供了5个关键字：left、right、center、top和bottom。这些关键字实际上就是百分比特殊值的一种固定用法。详细列表说明如下。
4.2.4 定义固定背景
视频讲解
在默认情况下，背景图像能够跟随网页内容上下滚动。可以使用background-attachment属性定义背景图像在窗口内固定显示，具体用法如下。
background-attachment：fixed | local | scroll
默认值为scroll，具体取值说明如下。
☑ fixed：背景图像相对于浏览器窗体固定。
☑ local：背景图像相对于元素内容固定，也就是说当元素内容滚动时，背景图像也会跟着滚动，此时不管元素本身是否滚动，当元素显示滚动条时才会看到效果。该属性值仅CSS3支持。
☑ scroll：背景图像相对于元素固定，也就是说当元素内容滚动时，背景图像不会跟着滚动，因为背景图像总是要跟着元素本身。
【示例】在本示例中，为<body>标签设置背景图片，且不平铺、固定，这时通过拖动浏览器滚动条，可以看到网页内容在滚动，而背景图片固定显示。
页面演示效果如图4.13所示。
图4.13 背景图片固定
4.2.5 定义原点
视频讲解
background-origin属性定义background-position属性的定位原点。在默认情况下，background-position属性总是以元素左上角为坐标原点定位背景图像。使用background-origin属性可以改变这种定位方式。该属性的基本语法如下。
background-origin:border-box | padding-box | content-box;
取值简单说明如下。
☑ border-box：从边框区域开始显示背景。
☑ padding-box：从补白区域开始显示背景，为默认值。
☑ content-box：仅在内容区域显示背景。
【示例】background-origin属性改善了背景图像定位的方式，更灵活地决定背景图像应该显示的位置。本示例利用background-origin属性重设背景图像的定位坐标，以便更好地控制背景图像的显示，演示效果如图4.14所示。
图4.14 设计诗词效果
示例代码如下。
4.2.6 定义裁剪区域
视频讲解
background-clip属性定义背景图像的裁剪区域。该属性的基本语法如下。
background-clip:border-box | padding-box | content-box | text;
取值简单说明如下。
☑ border-box：从边框区域向外裁剪背景，为默认值。
☑ padding-box：从补白区域向外裁剪背景。
☑ content-box：从内容区域向外裁剪背景。
☑ text：从前景内容（如文字）区域向外裁剪背景。
提示：如果取值为padding-box，则background-image将忽略补白边缘，此时边框区域显示为透明；
如果取值为border-box，则background-image将包括边框区域；
如果取值为content-box，则background-image将只包含内容区域；
如果background-image属性定义了多重背景，则background-clip属性值可以设置多个值，并用逗号分隔。
如果background-clip属性值为padding-box，background-origin属性值为border-box，且background-position属性值为"top left"（默认初始值），则背景图左上角将会被截取掉部分。
【示例1】本示例演示了如何设计背景图像仅在内容区域内显示，演示效果如图4.15所示。
<style type="text/css">
div {
height:150px;
width:300px;
border:solid 50px gray;
padding:50px;
background:url(images/bg.jpg) no-repeat;
/*将背景图像等比缩放到完全覆盖包含框，背景图像有可能超出包含框*/
background-size:cover;
/*将背景图像从content区域开始向外裁剪背景*/
background-clip:content-box;
}
</style>
<div></div>
图4.15 以内容边缘裁切背景图像效果
【示例2】本示例同时定义background-clip和background-origin属性值为content，可以设计比较特殊的按钮样式，演示效果如图4.16所示。
图4.16 设计按钮效果
4.2.7 定义大小
视频讲解
background-size可以控制背景图像的显示大小。该属性的基本语法如下。
background-size: [ <length> | <percentage> | auto ]{1,2} | cover | contain;
取值简单说明如下。
☑ <length>：由浮点数字和单位标识符组成的长度值。不可为负值。
☑ <percentage>：取值范围为0～100%。不可为负值。
☑ cover：保持背景图像本身的宽高比例，将图片缩放到正好完全覆盖所定义背景的区域。
☑ contain：保持图像本身的宽高比例，将图片缩放到宽度或高度正好适应所定义背景的区域。
background-size属性初始值为auto。可以设置1个或2个值，1个为必填，1个为可选。其中第1个值用于指定背景图像的width，第2个值用于指定背景图像的height，如果只设置1个值，则第2个值默认为auto。
【示例】设计自适应模块大小的背景图像。借助image-size属性自由定制背景图像大小的功能，让背景图像自适应盒子的大小，从而可以设计与模块大小完全适应的背景图像，本示例效果如图4.17所示，只要背景图像长宽比与元素长宽比相同，就不用担心背景图像脱节。
图4.17 设计背景图像自适应显示
示例完整代码如下。
<style type="text/css">
div {
margin:2px;
float:left;
border:solid 1px red;
background:url(images/img2.jpg) no-repeat center;
/*设计背景图像完全覆盖元素区域*/
background-size:cover;
}
/*设计元素大小*/
.h1 { height:120px; width:192px; }
.h2 { height:240px; width:384px; }
</style>
<div class="h1"></div>
<div class="h2"></div>
4.2.8 定义多背景图
视频讲解
CSS3中可以在一个元素里显示多个背景图像，还可以将多个背景图像进行重叠显示，从而使得背景图像中所用素材的调整变得更加容易。
【示例】本示例将用到8个背景图像，使用它们分别模拟圆角边框的4个顶角和4条边。最后通过CSS把它们分别固定到元素的边框和顶角上，设计效果如图4.18所示。
图4.18 定义多背景图像