背景经常会被用到,重点。
一、背景的几个属性
background-color | 背景颜色 |
background-image | 背景图片地址 |
background-repeat | 是否平铺 |
background-position | 背景位置 |
background-attachment | 背景固定还是滚动 |
其中背景位置中属性值用英文,有left、right、center、top、bottom,如果方位名字只写一个,另一个默认为center。还可以用精确坐标——像素值。在页面坐标中x轴是向右为正,y轴是向下为正。对于混搭,也是可以的,两个属性值一个为英文单词,另一个为像素值。
background-attachment 默认值为scroll,滚动的。还有一个属性值fixed,固定的。背景时候随着滑轮滚动而滚动。
二、背景的简写
background: transparent url(路径) repeat-y scroll 50% 0;
分别为:背景颜色 背景图片位置 背景平铺 背景滚动 背景位置
三、背景透明
background: rgba();
通过一个rgba的最后一个透明度确定背景的透明度。
四、背景缩放
①
background-size: 宽度 高度;//属性值是像素
尽量只改一个值,胖纸缩放失真扭曲。
②
background-size: 50%;
将背景图片缩放到一半的大小。
③
background-size: cover;
会自动调整缩放比例,保证图片始终填充背景区域。如有溢出则会被隐藏。图片可能会溢出一部分
④
background-size: contain;
自动缩放比例,保证图片始终完整显示在背景区域。背景图片必须完整显示在背景中。如果盒子宽度或高度与背景图片的宽度与高度,其中一项值相同,那么图片就不缩放了。
五、多背景
background: url(images/1.jpg) no-repeat left top,
url(images/2.jpg) no-repeat left bottom;
后面的背景在前面的背景的下面。有几个要点:
① 一个元素可以设置多重背景图像;
② 等组属性间使用逗号分隔;
③ 如果设置的多重背景图之间存在着交集(即重叠关系),前面的背景图会在后面的背景图之上。
④ 为了避免背景色将图片盖着,背景色通常都定义在最后一组上。