background 的一些 小的細節: 1, 背景色覆寫範圍: border+ width+ padding ;背景圖覆寫範圍: width + padding ; 2設定多個背景圖檔 ; 3) background-position定位百分比的計算方式: 4)background-clip 和 background-origin 的差別
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的用法釋疑
發表于
2017-07-19 16:26
s2Tt9eJ
閱讀(4556)
評論(0)
編輯
收藏
舉報