HTML5复习 (9)

一、CSS3背景图像区域    background-clip

background-clip:border-box;  //从边框开始显示图像，边框之外会被裁剪

background-clip:padding-box;  //从内边距框开始显示图像，边框之外会被裁剪

background-clip:content-box;  //从内容框开始显示图像，边框之外会被裁剪

二、CSS3背景图像定位  background-origin

background-origin:border-box;  //背景图片相对于边框来定位

background-origin:padding-box;  //背景图片相对于内边距框来定位

background-origin:content-box;  //背景图片相对于内容框来定位

三、背景图像的大小 background-size

background-size: 数值、百分比、cover、contain

百分比是根据div宽度来确定   cover将图片等比例缩放填满整个容器  contain将图片等比例缩放至某一边紧贴容器为止

四、多重背景图像

允许为图像使用多个背景图像

background-image: url("xx2.jpg"),url(xx1.jpg);

覆盖图片2会覆盖图片1

五、背景属性整合

background:color position size repeat origin clip attachment(是否随着滚屏移动 fixed不移动) url;