背景属性
background (缩写形式)
background-color (背景颜色)
background-image (背景图片)
background-repeat (背景图重复位置)
background-position (背景位置坐标,偏移量)
background-clip (背景图片的裁剪位置)
background-origin (背景图片开始的显示位置)
background-size (背景图片的大小)
background-attachment (图片以滚轴的形式体现)
css sprite (雪碧图)
背景颜色
background-color
background-color: red;
背景图片
background-image
background-image: url("../../img/3.jpg");
背景图片填充
background-repeat
其属性值可以为:
repeat-x (x轴方向填充)
repeat-y (y轴方向填充)
no-repeat
(不填充)
background-repeat: repeat-x;
背景位置坐标
background-position
当指定x或y中的一个方向时,另一个方向默认是居中效果
background-poosition:left;
background-position: 20px 20px;
背景图片大小
background-size
其属性值可以为:1:
100% 100%是x,y轴上完全放大填充,不管图片是否失真
2:
cover(覆盖):图片等比例缩放,知道最小部分填满容器
有可能会出现图片显示不全的效果
3:
contain(包含):图片也是等比例缩放,直到最大部分填满容器
有可能出现图片覆盖不完整的效果
background-size: cover;
背景图片的开始显示位置
background-origin
其属性值可以为:1:
border-box:从外边框开始显示
2:
padding-box:从内边距开始
3:
content-box:从内容处开始*/
background-origin:border-box;
背景图片的剪切位置
background-clip
其属性值可以为:1:
border-box:从外边框出开始剪切
2:
padding-box:从内边距开始剪切
3:
content-box:从内容出开始剪切
background-clip: padding-box;