1. background (background-color, background-image)  背景色覆盖范围: border+ width+ padding ;背景图覆盖范围: width + padding ;

背景颜色: 起点 是 border的外边缘

 

 

 http://www.w3cplus.com/content/css-background-origin

 

 

 

背景图片:定位的起点是 padding的外边缘处:

这是因为: background-origin 指定背景图像的定位区域   默认是 padding-box;

 

 

 

1) background-color:

 

包括的范围: border + padding + width:

注意的就是: 如果 border不是透明的话 ,border的颜色 会覆盖 住 background-color: 造成一种假象(范围是 padding + width);

当这是错误的.  如果 将border 设置为 透明 ,就会清楚的看到  background-color 的范围是  border + padding + width:

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>background-color: 定位的起点是 border的外边缘</title>
 6     <style type="text/css">
 7         .box {
 8             width: 200px;
 9             height: 200px;
10             border: 50px solid transparent;
11 
12             background-color: red;
13 
14             /*background-image: url(img/2.png);
15             background-size: 100px 100px;
16             background-repeat: no-repeat;*/
17 
18 
19             padding: 50px;
20         }
21     </style>
22 </head>
23 <body>
24 
25     <div class="box">
26         1111
27     </div>
28 </body>
29 </html>

 

 

width: 200px  ;  padding: 50px;  border: 50px  并且透明:

 

 因为: 背景色 是从 border外边缘开始 : 所以是   200(width) + 2*50(padding) + 2*50(border)

显示

 

 

 

 如果 border 不设置为透明:

 

 

 

 ----------

如果border 不设置为 solid ,看得更清楚一点.

 

 

 

 

 

 

 

-------------------------------------

2) background-image

覆盖的范围 是 width + padding

 

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>background-image: 定位的起点默认是是padding的外边缘, 可以通过background-origin修改</title>
 6     <style type="text/css">
 7         .box {
 8             width: 200px;
 9             height: 200px;
10             border: 50px solid transparent;
11 
12             background-color: red;
13 
14             background-image: url(img/2.png);
15             background-size: 100px 100px;
16             background-repeat: no-repeat;
17 
18 
19             padding: 50px;
20         }
21     </style>
22 </head>
23 <body>
24 
25     <div class="box">
26         1111
27     </div>
28 </body>
29 </html>

 

 

 

 

显示:

 

 

 

 

 

 

 

 

 参考链接:    菜鸟教程:

     

2. 设置多个背景图像

参见 1 -> 2) 中.  有两个背景图片 . 一个是纹理 x 和 y 都铺满了. 定位在 左上角(默认位置)  ; 一个是花朵 ,没有平铺,  并且定位在右下角.

 

 

3.background-position 定位的时候 ,百分比的意思.

background-image: 30%  40%;

如果容器的 宽和高是  500px,  背景的宽和高是 100px;

------

 错误:  容器宽 * 百分比 ;  容器 高 * 百分比:

  背景 左上角 定位: 距离 x 轴是500 * 30% = 150px , 距离 y轴 是 500 * 40% =  200px;

------

正确:  (容器宽 - 背景宽) * 百分比;   (容器高 - 背景高) * 百分比:

  注意: 容器宽 = width + padding  ;   容器高 = height + padding

  背景左上角定位: 距离 x 轴 是  (500 - 100) * 30% = 120px;  距离 y 轴 是 (500 - 100) * 40% = 160px;

---------------------

这是因为:

 

 

 

如果我们设置 background-origin : content-box 时 ,  容器 宽度 就是 width . 容器 高度 就是 height;

 

 

 

 

------------------

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>background-position百分比表示的意思:</title>
 6     <style type="text/css">
 7         .box {
 8             width: 500px;
 9             height: 500px;
10             border: 1px solid black;
11 
12             background-image: url(img/2.png);
13             background-size: 100px 100px;
14             background-repeat: no-repeat;
15 
16             background-position: 30% 40%;
17         }
18     </style>
19 </head>
20 <body>
21 
22     <div class="box">
23 
24     </div>
25 </body>
26 </html>

 

显示:

 

 

----------------------

注意: 如果设置 padding为 100px  , 因为width是 500 * 500 , 那么此时 容器 是  700 * 700 ;

此时: 距离左上角: x 轴 (500 + 2X 100 - 100) * 30% = 180px;  距离 y 轴: (700 - 100 ) * 40% = 240px;

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>background-position百分比表示的意思: + padding</title>
 6     <style type="text/css">
 7         .box {
 8             width: 500px;
 9             height: 500px;
10             border: 1px solid black;
11 
12             background-image: url(img/2.png);
13             background-size: 100px 100px;
14             background-repeat: no-repeat;
15 
16             background-position: 30% 40%;
17             padding: 100px;
18         }
19     </style>
20 </head>
21 <body>
22 
23     <div class="box">
24 
25     </div>
26 </body>
27 </html>

 

 显示:

 

 

------------

 参考链接:

    你真的了解background-position

 

 

4) background-clip 和 background-origin 的区别:

 

第一:  background-origin 是针对 background-image , 规定 background-image 进行 绘制图片的时候的  的左边原点 是哪里 ,

    border-box(边框的外边缘) ,  padding-box(paddng的外边缘 , 这是 默认值)  , content-box(内容的 外边缘)

 

第二: background-clip 是针对 背景(背景色 + 背景图) (已经绘制出来的图形 ,图片) 进行裁剪 ,显示一部分.

  它定义的是从哪里开始裁剪 , border-box (默认) , padding-box , content-box

  -----------

  注意: background-color 默认是 在 border的外边缘;    background-image 默认是 在 padding的外边缘;

     同时 , background-clip 默认是 从border-box 开始裁剪 , 因此背景色 ,背景图 都 可以被完成的裁剪.

 

------------------------------

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>background-image: 定位的起点默认是是padding的外边缘, 可以通过background-origin修改</title>
 6     <style type="text/css">
 7         .box {
 8             width: 200px;
 9             height: 200px;
10             border: 50px dotted black;
11 
12             background-color: red;
13             background-image: url(img/2.png);
14             background-size: 100px 100px;
15             background-repeat: no-repeat;
16 
17 
18             padding: 50px;
19             margin-bottom: 20px;
20         }
21     </style>
22 </head>
23 <body>
24     <h2>原图</h2>
25     <div>
26         <img src="img/2.png" style="height: 100px ; width: 100px;" ?>
27     </div>
28 
29     <h2>正常: border-origin: padding-box; border-clip: border-box; <br>
30         此时 background-color:显示所有; background-image显示所有
31     </h2>
32     <div class="box">
33         1111
34     </div>
35     <h2>border-clip: padding-box;<br>
36         background-color:裁剪了一部分; background-image 显示所有
37     </h2>
38     <div class="box" style="background-clip: padding-box;">
39         1111
40     </div>
41 
42     <h2>border-clip: padding-box; background-origin: border-box;<br>
43         background-color:裁剪了一部分; background-image 显示一部分:
44     </h2>
45     <div class="box" style="background-clip: padding-box; background-origin: border-box;">
46         1111
47     </div>
48 
49     <h2>border-clip: content-box; background-origin: border-box;<br>
50         background-color:裁剪了一部分; background-image 完全被裁剪掉了:
51     </h2>
52     <div class="box" style="background-clip: content-box; background-origin: border-box;">
53         1111
54     </div>
55 
56     <h2>border-clip: content-box; background-origin: content-box;<br>
57         background-color:裁剪了一部分; background-image 显示所有:
58     </h2>
59     <div class="box" style="background-clip: content-box; background-origin: content-box;">
60         1111
61     </div>
62 </body>
63 </html>

 

显示:

 

 --

 

 -------

 

 

 

 ----------------

 

 ----------------

 

 

 ----------------

 

 ----------------------------

 

总结:

  1. background-color 绘制 背景色 是 固定 的 从 border-box 开始的 .  并且 无法修改

  2. background-image  绘制 背景图 是 默认 从 padding-box 开始的,   可以通过  background-origin 进行 修改.

    注意: background-origin 只是对 background-image 产生效果.      

  3. background-clip 是 对背景色, 背景图 进行 裁剪, 显示 其中的一部分, 默认 是 从 border-box 开始 裁剪.

 

参考链接:

  css3属性中background-clip与background-origin的用法释疑