一、元素的前景层和背景层
元素的前景层包含内容(如文本、图片)和边框,元素的背景层可以是背景色(background-color)或者背景图片(background-image),背景图片叠加在背景颜色之上。
二、CSS背景常用属性
1、背景颜色background-color
前景色会影响元素的内容和边框,分三种情况:
- 若使用边框属性设置了边框颜色,则边框显示为设置的颜色;
- 若边框未使用边框属性设置边框颜色,若该元素设置了color属性,则边框颜色与color值相同;
- 若边框属性和color都未设置,则边框颜色使用默认颜色黑色,color的默认值为黑色。
情况二实例如下:
<div style="width:300px;background-color: aqua;border:4px solid;color:red">
通过这段文字来演示背景颜色属性background-color的作用
</div>
情况三实例如下:
<div style="width:300px;background-color: aqua;border:4px solid;">
通过这段文字来演示背景颜色属性background-color的作用
</div>
2、背景图片background-image
用如下图片作为元素背景图片
结果如下图所示:
<div style="width:300px;height:200px;background-image: url('./sear01.png');border:1px solid ">
测试背景图片
</div>
由上述结果可知:
- 当背景图片小于元素时,背景图片会在水平和垂直的方向重复出现,直至填满整个背景空间
- 默认情况下,背景图片会以元素的左上角为起点,沿着水平和垂直方向重复出现,最终填满整个背景区域。因为元素左上角为起点,所以元素盒子的底部和右侧的圆形图案都只显示了一部分。
3、背景图片background-repeat(即平铺问题)
background-repeat有四个可取值:
- no-repeat:不平铺
- repeat-x:横向平铺(水平方向重复)
- repeate-y:纵向平铺(垂直方向重复)
- repeat:横纵向平铺(默认,水平、垂直方向均重复)
各个取值效果如下所示:
<div style="width:200px;height:100px;background-image: url('./sear01.png');border:1px solid ">
图片重复方式为默认值,水平垂直均重复
</div>
<div style="width:200px;height:100px;background-image: url('./sear01.png');
background-repeat:repeat-x;border:1px solid ">
图片重复方式为水平重复
</div>
<div style="width:200px;height:100px;background-image: url('./sear01.png');
background-repeat:repeat-y;border:1px solid ">
图片重复方式为垂直重复
</div>
<div style="width:200px;height:100px;background-image: url('./sear01.png');
background-repeat:no-repeat;border:1px solid ">
图片重复方式为水平垂直均不重复
</div>
CSS3还规定另外两个值,以控制背景图片的重复次数,即所有图片都是完整的,不会出现半张图片的现象。
4、背景位置background-position
(1)绝对或相对单位的数值
//默认值,元素的左上角
background-position: 0 0;
//把图片向右移动
background-position: 75px 0;
//把图片向左移动
background-position: -75px 0;
//把图片向下移动
background-position: 0 100px;
(2)关键字
水平取值:left center right
垂直取值:top center bottom
使用关键字时,关键字的顺序不重要,即left bottom和 bottom top是相同的。
(3)百分比
使用关键字和百分比的情况下,设定的值同时应用于元素和图片,换句话说,如果设定了20% 20% ,则外部元素水平20%的位置和图片水平20%的位置对齐、外部元素垂直20%的位置和图片垂直20%的位置对齐,如下图所示:
设置背景的区域高度为containerY、宽度为containerX,背景图片的宽度为imgX、高度为imgY,针对对齐点,计算出图片相对于左上角:
top:containerY*20%-imgY*20% = (containerY-imgY)*20%;
left:containerX*20%-imgX*20% = (containerX-imgX)*20%;
进而总结出换算过程为:(设置背景的区域高度 - 背景图的高度) * 百分比(正或负值),如:(100 - 200) * -50% = 50px。
(4)多值
在CSS3中,对background-position属性进行了扩展,允许接受3到4个参数,用于指定背景图的起始方向和具体位置。在此前,比如IE8浏览器,最多支持同时出现两个值,从IE9开始支持同时出现3个或4个值。
5、背景位置background-size
background-size 指定背景图像的尺寸大小,以像素或百分比显示,当指定为百分比时,大小会由所在区域的宽度、高度以及 background-origin 的位置决定,还可以通过 cover 和 contain 来对图片进行伸缩。
取值形式如下:
background-size : contain | cover | 100px 100px | 50% 100%;
- 关键字:
// 缩小图片来适应元素的尺寸(保持像素的长宽比);
background-size:contain;
// 扩展图片来填满元素(保持像素的长宽比);
background-size :cover;
- 像素:
background-size :100px 100px; // 调整图片到指定大小;
- 百分比:
background-size :50% 100%; // 调整图片到指定大小,百分比相对于包含元素的尺寸。
6、背景粘附:background-attachment
背景是否随上方的内容一起滚动:
- fixed:固定
- scroll:滚动(默认)
7、背景图片简写
background:背景颜色color 背景图片image 背景是否平铺(重复方式)repeat 背景粘附attachment 展开方式水平 展开方式垂直position 图片大小size