【一】background-size 规定背景图像的尺寸
-
以像素规定尺寸
div { background:url(bg_flower.gif); -moz-background-size:63px 100px; /* 老版本的 Firefox */ background-size:63px 100px; background-repeat:no-repeat; }
-
以百分比规定尺寸(尺寸相对于父元素的宽度和高度)
div { background:url(bg_flower.gif); -moz-background-size:40% 100%; /* 老版本的 Firefox */ background-size:40% 100%; background-repeat:no-repeat; }
【二】background-origin 规定背景图片的定位区域
语法: background-origin: padding-box|border-box|content-box;
origin的翻译过来时原始的意思。顾名思义,所以background-origin是用来决定图片的原始起始位置。
比如content-box时,首先会让背景图片的左上角和内容边缘左上角对齐,padding-box时,则会让背景图片的左上角和内边距的左上角对齐。background-origin的值的确是决定背景图片开始从哪个区域开始显示。
如果没有设置任何的 background-origin属性的话,它默认的起始位置在哪呢?——padding。
有一点要十分的注意:如果背景不是no-repeat的话,这个属性是无效的。它会从border-box区域开始显示,这一点很重要。
http://www.html-5.cn/div-css/jiaocheng/2417.html
【三】background-clip 规定背景的绘制区域
语法: background-clip: border-box|padding-box|content-box;
clip原意为裁剪,截取。同样顾名思义,background-origin的作用为将背景图片做适当的裁剪,以适应需要。当然这里并不是真正意义上的把图片给裁剪了,而是根据属性值。把图片的某些部位做适当的隐蔽。
根据你设置的盒子部位,那么图片在这个部位的外边缘以外的部分都会不可见。举个具体例子,图片起始位置比如是从border-box开 始,但background-clip设置的值是content-box,那么只有content区域的内容可见,而在在content之外的图片内容都被隐蔽掉了。尽管你是让图片从边框开始显示。
http://www.html-5.cn/div-css/jiaocheng/2417.html
background-clip:border-box|padding-box|content-box
该属性指定了背景在哪些区域可以显示,但与背景开始绘制的位置无关,背景的绘制的位置可以出现在不显示背景的区域,这时就相当于背景图片被不显示背景的区域裁剪了一部分一样。
background-origin:padding-box|border-box|content-box
该属性指定了背景从哪个区域(边框、补白或内容)开始绘制,但也仅仅能控制背景开始绘制的位置,你可以用这个属性在边框上绘制背景,但边框上的背景显不显示出来那就要由background-clip来决定了
摘自 http://www.jb51.net/css/65594.html
【四】多重背景图片 (图片是重叠的)
background-image:url(bg1.gif),url(bg2.gif);
CSS3之背景 background-size background-origin background-clip,布布扣,bubuko.com