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;
包括的范围: 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;
12 background-color: red;
14 /*background-image: url(img/2.png);
15 background-size: 100px 100px;
16 background-repeat: no-repeat;*/
19 padding: 50px;
20 }
21 </style>
22 </head>
23 <body>
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)
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
;
12
background-color
:
red
;
14
background-image
:
url(img/2.png)
;
15
background-size
:
100px 100px
;
16
background-repeat
:
no-repeat
;
19
padding
:
50px
;
20
}
21
</
style
>
22
</
head
>
23
<
body
>
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;
---------------------
这是因为:
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
;
12
background-image
:
url(img/2.png)
;
13
background-size
:
100px 100px
;
14
background-repeat
:
no-repeat
;
16
background-position
:
30% 40%
;
17
}
18
</
style
>
19
</
head
>
20
<
body
>
22
<
div
class
="box"
>
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;
12 background-image: url(img/2.png);
13 background-size: 100px 100px;
14 background-repeat: no-repeat;
16 background-position: 30% 40%;
17 padding: 100px;
18 }
19 </style>
20 </head>
21 <body>
23 <div class="box">
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;
12 background-color: red;
13 background-image: url(img/2.png);
14 background-size: 100px 100px;
15 background-repeat: no-repeat;
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>
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>
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>
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>
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的用法释疑
