css3.0学习笔记【一】--background新特性

<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>css3教程background</title> <style> .bg { background:url(images/02.jpg) no-repeat; border:10px solid transparent; width:200px; height:200px; padding:20px; margin:100px auto; background-origin:content-box; outline:3px solid #ff0; } </style> </head> <body> <div class="bg">这里是内容区域</div> </body> </html>

<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>css3教程background</title> <style> .bg { background-image:url(images/02.jpg); background-clip:content-box; border:10px dashed #f00; width:200px; height:200px; padding:20px; margin:100px auto; outline:3px solid #ff0; } </style> </head> <body> <div class="bg">这里是内容区域</div> </body> </html>

需要说明的一点是，当背景不平铺的时候，border-box是失效的，还原为默认值padding-box。

指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定。还可以通过cover和contain来对图片进行伸缩。

<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>css3教程background</title> <style> .bg { background-image:url(images/02.jpg); background-repeat:no-repeat; background-origin:padding-box; background-size:contain; border:10px dashed #f00; width:200px; height:200px; padding:20px; margin:100px auto; outline:3px solid #ff0; } </style> </head> <body> <div class="bg">这里是内容区域</div> </body> </html>

<background-repeat>：设置或检索对象的背景图像是否及如何重复铺排。

多重背景图象，可以把不同背景图象只放到一个块元素里。

多个图片url之间使用逗号隔开即可；如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。

CSS3中在容器的多层背景，各子属性与逗号来分隔值，如果指定的值，如下：

background-image: w₁, w₂, w₃,…, w_M
background-repeat: x₁, x₂, x₃,…, x_R
background-size: y₁, y₂, y₃,…, y_S
background-position: s₁, s₂, s₃,…, s_P

当背景层的数值是N = max(M,R, S, P)

每个属性可以假如它的值为n，通过重复指定的值如下所示：

background-image: w ₁,… w _M, w ₁,… w _M, w ₁,… /* N values */
background-repeat: x ₁,… x _R, x ₁,… x _R, x ₁,… /* N values */
background-size: y ₁,… y _S, y ₁,… y _S, y ₁,… /* N values */
background-position: s ₁,… r _P, s ₁,… r _P, s ₁,… /* N values */

范例书写：

background-image: url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png), url(img/multiple-backgrounds.png);
background-position: left top, -320px bottom, -640px top;
background-repeat: no-repeat, no-repeat, repeat-y;

也可以简写：

background: url(img/multiple-backgrounds.png) left top no-repeat, url(img/multiple-backgrounds.png) -320px bottom no-repeat, url(img/multiple-backgrounds.png) -640px top repeat-y;

兼容性视图：

代码示例：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title>css3教程background</title>
<style>
.bg {
    background:url(images/lefttop.jpg), url(images/righttop.jpg), url(images/rightbtm.jpg), url(images/leftbtm.jpg);
    background-repeat:no-repeat, no-repeat, no-repeat, no-repeat;
    background-position:left top, right top, right bottom, left bottom;
    background-color:#04a413;
    width:200px;
    height:200px;
    margin:100px auto;
    padding:10px;
    background-origin:border-box;}
.con {
    width:100%;
    height:100%;
    background:#fff;
    margin:0;
}
</style>
</head>

<body>
<div class="bg">
  <p class="con">这里是内容区域</p>
</div>
</body>
</html>

测试结果图：

padding-box	默认值。该位置是相对于衬距方框而言的。对于单一方框，“0 0”是衬距边缘的左上角；“100% 100%”是右下角。
border-box	该位置是相对于边框方框而言的。
content-box	该位置是相对于内容方框而言的。

border-box	默认值。背景绘制在边框方框内（剪切成边框方框）。
padding-box	背景绘制在衬距方框内（剪切成衬距方框）。
content-box	背景绘制在内容方框内（剪切成内容方框）。

auto	默认值。保持图像的纵横比。只设置hSize，vSize默认为auto,图象按照 hSize等比例缩放；如果设置vSize，hSize设置为auto,图象按照vSize等比例缩放；如果两个都设置，将按照相应的值缩放；如果将 hSize 和 vSize 都设置为 auto ，则会将图像缩放成其原始大小的 100%。
contain	此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。等比例缩放图象到垂直或者水平其中一项填满区域。
cover	此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。等比例缩放图象到垂直和水平两项均填满区域。
length	hSize 指定图像的宽度；vSize 指定图像的高度。如果只指定 hSize 或 vSize，则其他项的值会设置为 auto 。
percentage	hSize 指定图像的宽度；vSize 指定图像的高度。如果只指定 hSize 或 vSize，则其他项的值会设置为 auto 。将计算相对于背景定位区域的百分比。

css3.0学习笔记【一】--background新特性

你可能感兴趣的:(background)