background属性及其应用
background
属性:
background-size
background-origin
background-clip
background-size:
参数:
length 带有单位的数值
percentage 百分比
cover 覆盖整个盒子 等比放大
contain 把整个图片完整的包裹进盒子当中 等比放大
background-size:100px;
当这个属性设置一个值的时候,这个值表示宽度,高度为自适应。
Tip:当设置一个值的时候,不要错误的把高度也想象成这个值。
如果设置两个值的时候,第一个值表示宽度,第二个值表示高度。
当值设置为百分比的时候,是以父容器的宽度和高度为参考。
cover 表示不去考虑图片能不能够完整的显示,而是要把容器占满。
contain 表示不去考虑图片是否占满盒子,而是考虑图片显示完整。
300 400
宽高比3:4
Tip:ie6-8不能够支持
插件:backgroundsize.min.htc
background-origin 背景位置
相关属性:
padding-box 图片会占满padding+内容
border-box 图片会占满border+padding+内容
content-box 图片会占满内容区域
background-clip 背景裁切
相关属性:
padding-box
border-box 默认值
content-box
多背景:
/多背景,顺序靠前,层级就高/
background: url(./images/xx1.jpg) no-repeat left top,
url(./images/xx3.jpg) no-repeat left bottom,
url(./images/xx4.jpg) no-repeat right top,
url(./images/xx5.jpg) no-repeat right bottom,
url(./images/xx2.gif) no-repeat center center;