CSS3之背景 background-size background-origin background-clip

【一】background-size  规定背景图像的尺寸

1. 以像素规定尺寸　　　　

   div
   {
   background:url(bg_flower.gif);
   -moz-background-size:63px 100px; /* 老版本的 Firefox */
   background-size:63px 100px;
   background-repeat:no-repeat;
   }

2. 以百分比规定尺寸（尺寸相对于父元素的宽度和高度）
   

   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);

转载于:https://www.cnblogs.com/super-zhen/p/3769033.html