碼上快樂

相關內容    簡體    繁體

你不知道的CSS背景—css背景屬性全解

本文轉載自   查看原文   2016-08-26 17:18   2016    CSS

 

 

CSS背景在網頁設計中使用頻率非常高，然而對於這個開發人員很熟悉的CSS屬性，卻隱藏着許多不為初級開發人員熟知的細節，這篇文章嘗試扒開這層不為人知的面紗。

 

首先列舉一下CSS中關於元素背景的所有屬性並簡要描述了其作用，其中后面幾個屬性是在CSS3中新加入的。

屬性 描述 備注
background 簡寫屬性，作用是將背景屬性設置在一個聲明中。  
background-color 設置元素背景顏色  
background-image 把圖像設置為背景  
background-repeat 設置背景圖像是否及如何重復。 僅作用與背景圖片，不會影響背景顏色
background-position 設置背景圖像的起始位置。 僅作用與背景圖片，不會影響背景顏色
background-attachment 背景圖像是否固定或者隨着頁面的其余部分滾動。 僅作用與背景圖片，不會影響背景顏色
background-origin 規定背景圖片的定位區域。 CSS3，僅作用與背景圖片，不會影響背景顏色
background-clip 規定背景的繪制區域。 CSS3同時作用域背景圖片和背景顏色
background-size 規定背景圖片的尺寸。 CSS3

 

下面一一“理清”這些屬性

background這個復合屬性就不多說了，它可以將其他的屬性值寫在一起

 

1
background:[< background-color >] [,background-image] [,background-repeat] [,background-attachment] [,background-position]...

1.background-color

background-color可以使用十六進制顏色、RGB顏色、RGBA顏色、HSL色彩、HSLA顏色 、顏色關鍵字等表示的顏色 ，然而很多初級開發者不清楚的是backgroud-color在元素盒模型中覆蓋的范圍是多大。下面我們測試一下：

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >Document</ title >
     < style type = "text/css" >
         *{
             margin: 0px;
             padding: 0px;
         }
         div{
             width: 400px;
             height: 200px;
             margin: 20px;
             padding: 15px;
             border: 10px dotted red;
             background-color: green;       
         }
     </ style >
</ head >
< body >
     < div >
     </ div >   
</ body >
</ html >

為了驗證背景顏色有沒有鋪蓋到邊框，這里設置了邊框的樣式為點線形式，在現代標准瀏覽器中測試（包括IE8及以上）如下左圖所示，而在IE6環境中測試如下右圖所示。

                         

 

所以結論是:CSS2元素顏色背景的顯示范圍與CSS2.1、CSS3並不相同。在CSS2中（支持IE6），顏色背景的顯示范圍是指內部留白（包括padding）之內的范圍，不包括邊框；在CSS2.1和CSS3中（包括IE8以上測試），背景在整個盒模型中，它是布滿整個元素的盒子區域的（但是仍然不包括外邊margin范圍）。

 

2.background-image:none || <url> 

元素的圖片背景是元素的總大小，包括padding和border（但不包括margin）。默認情況下，background-image放置在元素的左上角,並重復垂直和水平方向(后面會講到background-position默認值為0% 0%,background-repeat默認是repeat),與background-color的默認覆蓋范圍是相同的，在現代標准瀏覽器中鋪滿padding和border，在IE6中卻不包括邊框。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type= "text/css" >
         *{
             margin : 0px ;
             padding : 0px ;
         }
         div{
             width : 400px ;
             height : 200px ;
             margin : 20px ;
             padding : 15px ;
             border : 10px dotted red ;
             background-color : green ;
             background-image : url (images.jpg);
             
       }
 
</style>

左圖為現代標准瀏覽器，在IE瀏覽器中測試，可以將其渲染模式設置為IE6.

         

 

 

 

3.background-repeat:repeat(默認)||repeat-x||repeat-y||no-repeat 

background-repeat屬性非常好理解，可以決定圖片背景是否在水平或者垂直方向重復，其默認值是repeat,即在兩個方向都重復。然而，很多初級開發者不知道的是，當設置background-repeat為no-repeat時，在現代標准瀏覽器中圖片背景的覆蓋范圍會發生變化，下面測試一下：

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type= "text/css" >
*{
     margin : 0px ;
     padding : 0px ;
}
div{
     width : 400px ;
     height : 200px ;
     margin : 20px ;
     padding : 15px ;
     border : 10px dotted red ;
     background-color : green ;
     background-image : url (test.jpg);
     background-repeat : no-repeat ;
     
}
 
</style>

這里換上了一個比div要大的圖片，左圖為現代標准瀏覽器的測試結果，右圖為IE6中測試結果。

 

          

 

可以很明顯的發現，左圖中，上邊框和左邊框沒有被圖片背景覆蓋，露出了綠色的背景顏色。而在IE6環境中表現並沒有發生變化。

 

4.backgroud-positon:%x %y|| xpos ypos||關鍵字 

設定背景位置時可以使用三種值：關鍵字、百分比、絕對或相對單位的數值。關鍵字為left、right、與top、bottom、center的組合 ,可以使用兩個值 分別設定水平和垂直位置。 關鍵字指的順序不重要， left bottom 和 bottom left 意思相同。為了設定的值在所有瀏覽器中都有效，最好不要混用關鍵字值與數字值。 使用數值（比如 40% 30%）時，第一個值表示水平位置，第二個值表示垂直位置。要是只設定 一個值，則將其用來設定水平位置，而垂直位置會被設為 center。 

需要注意的是：在使用關鍵字和百分比值的情況下，設定的值同時應用於元素和圖片。換句話說，如果設定了33% 33%，則圖片水平 33%的位置與元素水平 33%的位置對齊。垂直方面也一樣。可以通過 center center 把圖片的中心點定位在了元素的中心點。像素之類的絕對單位數值就不一樣了。要是用像素單位來設定位置，那么圖片的左上角會被放在距離元素左上角指定位置的地方。 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type= "text/css" >
         *{
             margin : 0px ;
             padding : 0px ;
         }
         div{
             width : 400px ;
             height : 200px ;
             margin : 20px ;
             padding : 15px ;
             border : 10px dotted red ;
             background-color : green ;
             background-image : url (images.jpg);
             background-position : 50% 50% ;      
         }
 
     </style>

左圖為現代標准瀏覽器，右圖為IE6,可以看到圖片被定位到正中間，並在水平和垂直方向重復，這也說明了使用百分比設置定位時是同時作用在元素和背景圖片上的，如若不然，圖片應該位於黃色方框所在的位置。

                            

 

 

 接下來我們刨根問底，background-position的默認定位起始點是哪里？是邊框？還是內留白padding?

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type= "text/css" >
         *{
             margin : 0px ;
             padding : 0px ;
         }
         div{
             width : 400px ;
             height : 200px ;
             margin : 20px ;
             padding : 15px ;
             border : 10px dotted red ;
             background-color : green ;
             background-image : url (images.jpg);
             background-position : 10px 10px ;
             /*background-repeat: no-repeat;*/              
         }
     </style>

                                  

 

 

從圖中我們找到沿水平和垂直方向重復前的原始圖片，如圖中黃色方框所示，在css中我們設置的background-position:10px 10px;整個數值正好是邊框的寬度，如果定位起點是邊框外邊緣，則圖片的左上角應該位於邊框左上角外邊緣，而實際顯示卻不是，圖片起點是相對於邊框內邊緣或者說內留白padding的外邊緣定位的，然后水平和垂直重復鋪滿包括邊框的區域。

如果加上background-repeat: no-repeat效果更容易看出來，下圖是現代標准瀏覽器的測試結果，

                   

 

 

有意思的是，還可以使用負值。這樣就可以把圖片的左上角定位到元素外部，從而在元素中只 能看到部分圖片。當然，給background-position設定足夠大的正值，也可以把圖片的右下角推到元素外部，從 

而在元素中也只能看到部分圖片,甚至把讓個背景圖片元素外部，位於元素外部的那部分圖片不會顯示這也沒什么實際意義了。既然background-position可以設置負值，我們考慮第3節出現的問題：當設置background-repeat為no-repeat時，上邊框和左邊框沒有被圖片背景覆蓋。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style type= "text/css" >
         *{
             margin : 0px ;
             padding : 0px ;
         }
         div{
             width : 400px ;
             height : 200px ;
             margin : 20px ;
             padding : 15px ;
             border : 10px dotted red ;
             background-color : green ;
             background-image : url (test.jpg);
             background-position : -10px -10px ;  
             background-repeat : no-repeat ;              
         }
     </style>

           

可以看到在現代標准瀏覽器中設置負的background-position生效了，又重新覆蓋了邊框，但是在IE6中還是保持原來的狀態，也就是說IE6中背景顏色和背景圖片不管怎么樣也不會覆蓋邊框。

 

5.background-attachment :scroll ||fixed 


這個屬性用來設置元素背景圖片是否固定或者隨着頁面的其余部分滾動，其默認值為"scroll",表示背景圖片會隨着瀏覽器的滾動條一起滾動，而取值為"fixed"，背景圖片固定不動。這個屬性的使用方法是不是就是這么簡單呢，一般博客或者書上會說“background-attachment取值為"fixed"時，一般運用在html或者body標簽上，使用在其他標簽上不能達到固定的效果。-《圖解CSS3核心技術與案例實戰—大漠著》”在網頁設計中，我們常用一張圖片作為整個頁面的背景，並且讓其固定不隨頁面滾動。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >Document</ title >
     < style type = "text/css" >
         *{
             margin: 0px;
             padding: 0px;
         }
         body{
             background-image:url(images.jpg);
             background-position: 50% 50%;
             background-repeat:no-repeat;
             background-attachment:fixed
         }
         </ style >
     </ head >
     < body >
         < div >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
             < p >圖像不會隨頁面的其余部分滾動。</ p >
         </ div >
     </ body >
     </ html >
 

上述的效果即使在IE6中測試也是通過的，那么，background-attachment是不是只能使用在html和body標簽上呢？答案是：background-attachment在標准瀏覽器中（即IE6以外的瀏覽器），僅在html和body中才起作用（html和body的background-attachment默認是scroll，可以設置成fixed；其他元素overflow:scroll滾動時的background-attachment始終是fixed，並且設置scroll無效）；下面我們測試一下，測試過程中會使用overflow:scroll屬性讓div元素產生滾動條。

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title >Document</ title >
     < style type = "text/css" >
         *{
             margin: 0px;
             padding: 0px;
         }
         div{
             width: 400px;
             height: 200px;
             margin: 20px;
             padding: 15px;
             border: 2px solid red;
             background-image: url(images.jpg);
             background-repeat: no-repeat;
             background-attachment: scroll;
             overflow: scroll;
         }
 
     </ style >
</ head >
< body >
     < div >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
         < p >圖像不會隨頁面的其余部分滾動。</ p >
     </ div >   
</ body >
</ html >

 

在谷歌瀏覽器中測試結果如下

也就是說在標准瀏覽器中，div元素的背景是固定的，即使設置了background-attachment: scroll。

在IE6環境中測試如下

 


在IE6中背景圖片默認是可以隨着內容滾動的，即使不設置background-attachment: scroll，在IE6中圖片背景也是可以滾動的。

總的來說：background-attachment有如下特點

 

 1.background-attachment在標准瀏覽器中（即IE6以外的瀏覽器），僅在html和body中才起作用（html和body的background-attachment默認是scroll，可以設置成fixed；其他元素overflow:scroll滾動時的background-attachment始終是fixed，並且設置scroll無效）；
   2.IE系列（IE6-8）在不指定文檔類型的時候（進入quirks mode模式），元素中的background-attachment支持scroll和fixed，而FF等其他內核瀏覽器仍然無效。

 3.在不給元素設置background-attachment，並且該元素overflow:scroll滾動時，標准瀏覽器中默認是fixed效果，而在IE6中默認是scroll效果。

 4.在IE6下，不管在任何時候設置background-attachment的fixed或scroll都起作用；即，IE6支持任何元素的background-attachment的一切。

 

下面介紹的幾個屬性是CSS3中新增加的，只在現代標准瀏覽器中支持。

 

6.background-origin:padding-box || border-box || content-box

 background-origin屬性主要用來決定background-position屬性的參考原點，默認值為padding-box,代表定位參考原點是padding外邊緣左上角。以此類推，就能明白另外兩個取值的意思，這也解釋了為什么默認的時候，原始圖片是從padding區域開始鋪，只有設置水平重復或者垂直重復的時候才會鋪到邊框里，如果把background-origin設置為border-box

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type= "text/css" >
         *{
             margin : 0px ;
             padding : 0px ;
         }
         div{
             width : 400px ;
             height : 200px ;
             margin : 20px ;
             padding : 15px ;
             border : 10px dotted red ;
             background-color : green ;
             background-image : url (images.jpg);
             background-origin: border-box;
             background-position : 10px 10px ;
             background-repeat : no-repeat ;
 
         }
     </style>

 

             

 

 

我們這里設置了background-position: 10px 10px，這個數字正好是邊框寬度，在現代標准瀏覽器中，圖片左上角正好位於邊框內邊緣，也就是padding的外邊緣,所以設置生效了，圖片的定位起點是元素盒模型中邊框左上角外邊緣。而IE6不支持CSS3，定位起點仍然是邊框內邊緣也就是相對於padding區域。

 

7.background-clip:border-box||padding-box||content-box 


分別對應背景被裁剪到邊框盒、背景被裁剪到內邊距框、背景被裁剪到內容框。 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style type= "text/css" >
         *{
             margin : 0px ;
             padding : 0px ;
         }
         div{
             width : 400px ;
             height : 200px ;
             margin : 20px ;
             padding : 15px ;
             border : 10px dotted red ;
             background-color : green ;
             background-image : url (images.jpg);
             background- clip : content-box;
         }
     </style>

 

                 

 

在現代標准瀏覽器中，圖片和背景顏色覆蓋區域都被剪裁到內容區域。IE6中未生效。

 

 

8.background-size: length|percentage|cover|contain

值

描述

length

設置背景圖像的高度和寬度,將改變圖片的高度。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。

percentage

以父元素的百分比來設置背景圖像的寬度和高度（注意百分比時相對於是元素的高度而不是圖片的高度）。第一個值設置寬度，第二個值設置高度。如果只設置一個值，則第二個值會被設置為 "auto"。

cover

把背景圖像擴展至足夠大，以使背景圖像完全覆蓋背景區域。背景圖像的某些部分也許無法顯示在背景定位區域中。

contain

把圖像圖像擴展至最大尺寸但是保持背景圖像本身的寬高比例，以使其寬度和高度完全適應內容區域。

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<style type= "text/css" >
         *{
             margin : 0px ;
             padding : 0px ;
         }
         div{
             width : 400px ;
             height : 200px ;
             margin : 20px ;
             padding : 15px ;
             border : 10px dotted red ;
             background-color : green ;
             background-image : url (images.jpg);
             background- clip : content-box;
             background- size : cover;
             /*background-size: contain;*/
         }
     </style>

 

                    

 設置background-size為cover后，圖片拉伸覆蓋了整個背景區域（例子中的背景區域是使用background-clip屬性限制在內容區域的）,如果設置background-size為contain,效果如上右圖。圖片保持寬高比例伸縮，這里首先是圖片下邊緣碰到了背景區域下邊緣，此時圖片背景右邊還沒有碰到背景區域的右邊緣，由於例子中background-repeat默認為repeat，所以繼續在水平方向重復直到碰到背景區域的右邊緣。

 總結：CSS中關於背景的屬性不是很多，但其中的細節卻 值得每位前端開發人員弄清楚。幸虧弄了一張美女圖，不然肯定是不能堅持寫完了。

 

 

 






免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 你所不知道的 CSS 陰影技巧與細節 你可能不知道的css-doodle CSS浮動，你不知道的事 你所不知道的 CSS 濾鏡技巧與細節 你不知道的css之 width “繼承”篇。 css文本換行你所不知道的技巧 你不知道的css中的expression 你所不知道的 CSS 負值技巧與細節 CSS背景和CSS3背景background屬性 CSS背景屬性匯總
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM