HTML-CSS-189:背景相关

背景尺寸属性

background-size:length|percentage|cover|contain;

length 设置背景图像的高度和宽度。第一个值设置宽度,第二个值设置高度。如果只设置一个值,
           则第二个值会被设置为 "auto"。

percentage 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度,第二个值设置高
                   度。如果只设置一个值,则第二个值会被设置为 "auto"。

cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示 在背景定位区域中。

contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域


背景图片定位区域属性

background-origin: padding-box|border-box|content-box;

padding-box 背景图像相对于内边距框来定位。

border-box 背景图像相对于边框盒来定位。

content-box 背景图像相对于内容框来定位。


背景图片绘制区域属性

background-clip: border-box|padding-box|content-box;

border-box 背景被裁剪到边框盒。

padding-box 背景被裁剪到内边距框。

content-box 背景被裁剪到内容框。


多重背景图片

/*先添加的图片显示在上面,多个背景图片用逗号隔开,代码如下*/

background-image:url("img/one-piece/offer/run.png"),url(img/one-piece/offer/hzwbg.jpg);

background-size:30% auto,cover;

background-repeat:no-repeat,no-repeat;

background-position:100% 7000%,0 0;

你可能感兴趣的:(HTML-CSS-189:背景相关)