背景属性
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;