CSS background屬性

ackground屬性

屬性解釋

background屬性是css中應用比較多，且比較重要的一個屬性，它是負責給盒子設置背景圖片和背景顏色的，background是一個復合屬性，它可以分解成如下幾個設置項：

background-color 設置背景顏色

background-image 設置背景圖片地址

background-repeat 設置背景圖片如何重復平鋪

background-position 設置背景圖片的位置

background-attachment 設置背景圖片是固定還是隨著頁面滾動條滾動

實際應用中，我們可以用background屬性將上面所有的設置項放在一起，而且也建議這么做，這樣做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，這里面的“#00ff00”是設置background-color；“url(bgimage.gif)”是設置background-image；“no-repeat”是設置background-repeat；“left center”是設置background-position；“fixed”是設置background-attachment，各個設置項用空格隔開，有的設置項不寫也是可以的，它會使用默認值。

舉例：

下面這些例子使用下面這張圖片做為背景圖：

1、“background:url(bg.jpg)”，默認設置一個圖片地址，圖片會從盒子的左上角開始將盒子鋪滿。

2、“background:cyan url(bg.jpg) repeat-x”，橫向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。

3、“background:cyan url(bg.jpg) repeat-y”，縱向平鋪盒子，盒子其他部分顯示背景顏色“cyan”。

4、“background:cyan url(bg.jpg) no-repeat”，背景不重復，背景和盒子左上角對齊，盒子其他部分顯示背景顏色“cyan”。

5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重復，背景和盒子左中對齊，盒子其他部分顯示背景顏色“cyan”。

6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重復，背景和盒子右中對齊，也就是背景圖片的右邊對齊盒子的右邊，盒子其他部分顯示背景顏色“cyan”。

相關代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>test background</title>
 <style type="text/css">
 .backshow{
 width:320px;
 height:160px;
 border:3px solid #333;
 float:left;
 margin:10px; 
 }
 .bg1{background:cyan url(bg.jpg);}
 .bg2{background:cyan url(bg.jpg) repeat-x;}
 .bg3{background:cyan url(bg.jpg) repeat-y;}
 .bg4{background:cyan url(bg.jpg) no-repeat;}
 .bg5{background:cyan url(bg.jpg) no-repeat left center;}
 .bg6{background:cyan url(bg.jpg) no-repeat right center;}
 </style>
</head>
<body>
 <div class="backshow bg1"></div>
 <div class="backshow bg2"></div>
 <div class="backshow bg3"></div>
 <div class="backshow bg4"></div>
 <div class="backshow bg5"></div>
 <div class="backshow bg6"></div>
</body>
</html>

例子說明：

background-position的設置，可以在水平方向設置“left”、“center”、“right”，在垂直方向設置“top”、“center”、“bottom”，除了設置這些方位詞之外，還可以設置具體的數值。

比如說，我們想把下邊的盒子用右邊的圖片作為背景，并且讓背景顯示圖片中靠近底部的那朵花：

用上面中間那張圖片作為左邊那個比它尺寸小的盒子的背景，上面右邊的實現效果設置為：“background:url(location_bg.jpg) -110px -150px”，第一個數值表示背景圖相對于自己的左上角向左偏移110px，負值向左，正值向右，第二個數值表示背景圖相對于自己的左上角向上偏移150px，負值向上，正值向下。

實現原理示意圖：

對應代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>test background</title>
 <style type="text/css">
 .backshow{
 width:320px;
 height:160px;
 border:3px solid #333;
 float:left;
 margin:10px; 
 } 
 .bg{width:94px;
 height:94px;
 border:3px solid #666;
 background:url(location_bg.jpg) -110px -150px;
 }
 </style>
</head>
<body>
 <div class="bg"></div>
</body>
</html>

理解練習：

通過雪碧圖制作如下布局：

望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

【技術等級】初級

【承接文章】《在CSS中使用background屬性，調整頁面和塊背景，系統講解背景屬性》

本文承接上一篇文章中所講到的background屬性，通過幾個簡單實用的小例子，學些背景效果的各種實現方式。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。

所承接的上一篇文章中，主要介紹了下列背景屬性：

background-color
background-image
background-repeat
background-position
background-attachment

本文在上一篇文章的基礎上，復習和鞏固這五個屬性的具體用法。

例1：為網頁背景制作水印效果。

首先制作一張水印效果的圖片。該圖片的內容透明度較低，圖片較小。本例中制作了一個寬度為290像素，高度為205像素的圖片。該圖片的文件名為back01.jpg。圖片內容為兩行文本，顏色為黑色，同時調整了兩行文本的不透明度。圖片效果如下所示，大家也可以根據自己喜好利用Photoshop隨意制作。

例1素材圖片 back01.jpg

為頁面添加如下代碼在<head></head>標記對中：

<style type="text/css">
body{background-image:url("back01.jpg");}
</style>

由于圖片本身的尺寸遠遠小于整個頁面的大小，所以在默認情況下，該圖片會在頁面中平鋪以產生下列背景效果。

例1最終效果圖

例2、為網頁背景制作頂部花邊效果。

首先制作一張花邊圖片。該圖片包含一個花邊圖樣，圖片較小。本例中制作了一個寬度為172像素，高度為36像素的圖片。該圖片的文件名為back02.jpg。圖片效果為：

例2 素材圖 back02.jpg

為頁面添加如下代碼在<head></head>標記對中：

<style type="text/css">
body{
background-image:url("back02.jpg");
background-repeat:repeat-x;
}
</style>

由于圖片本身的尺寸遠遠小于整個頁面的大小，同時又設置為水平方向平鋪，所以該圖片會在頁面中產生下列背景效果。

例2最終效果圖

例3、為網頁背景制作漸變背景。

首先制作一張漸變圖片。該圖片包含自上而下的藍白漸變。本例中制作了一個寬度為1像素，高度為200像素的圖片。該圖片的文件名為back03.jpg。圖片效果為：

例3 素材圖片 back03.jpg

為頁面添加如下代碼在<head></head>標記對中：

<style type="text/css">
body{
background-image:url("back03.jpg");
background-repeat:repeat-x;
}
</style>

由于圖片的寬度遠遠小于整個頁面的寬度，同時又設置了水平方向平鋪，所以該圖片該圖片會在頁面中產生下列背景效果。

同時，由于頁面本身的顏色默認為白色，因此，該漸變色下方的白色與頁面背景顏色融合。因此，當頁面過長產生垂直滾動條后，不會影響背景顏色的自然過渡。

那么，若需要給頁面背景添加自上而下的白藍漸變，應該如何設置呢？漸變色下方的藍色與頁面背景無法融合，會產生明顯的藍白邊界。該問題的解決方法是將頁面的背景顏色由默認的白色調整為漸變色下方的顏色即可。代碼如下：

<style type="text/css">
body{
background-image:url("back03.jpg");
background-repeat:repeat-x;
background-color:# 8181fc; //漸變色下方的藍色
}
</style>

例4：設置網頁的背景圖片位于頁面中心，且不隨垂直滾動條的滾動而滾動。

首先制作一張可以居中放置的圖片。本例中制作了一個寬度為500像素，高度為500像素的圖片。該圖片的文件名為back04.jpg。圖片效果為：

例4 素材圖片 back04.jpg

實現該效果的代碼如下所示。

<style type="text/css">
body{
background-image:url("back04.jpg"); //加載圖片
background-repeat:no-repeat; //設置不平鋪
background-position:center center; //位置在頁面中心
background-attachment:fixed; //頁面滾動時圖片固定
}
</style>

文章預告

下一篇文章中，小海老師會帶領大家學習CSS中功能強大的圖片精靈技術（CSS Sprite）。對于渴望在前端開發道路上前進的你一定不能錯過！

小海教材

如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。

小海聲明

在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。

希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。

關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。

過CSS背景屬性，可以給頁面元素添加背景樣式。

背景屬性可設置背景顏色、背景圖片、背景平鋪、背景圖片位置、背景圖像固定等。

背景顏色

background-color：rgb值或顏色單詞；

默認背景顏色值為transparent（透明）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景屬性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        /* 背景顏色 */
        .bg-color {
            background-color: transparent;
        }
        .bg-color-trans {
            text-align: center;
            background-color: pink;
            width: 100px;
            height: 100px;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div class="bg-color">背景顏色
        <div class="bg-color-trans">透明背景</div>
    </div>
</body>
</html>

效果：

背景圖片

Background-image：圖片路徑URL；

默認背景圖片值為none。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景屬性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        .bg-image {
            background-image: url(../images/meitizhub.jpg);
        }
    </style>
</head>
<body>
    
    <div class="bg-image">背景圖片</div>
    
</body>
</html>

效果：

背景平鋪

background-repeat：repeat | no-repeat | repeat-x | repeat-y

background-repeat：repeat；

默認情況下背景圖片狀態為平鋪，指的是圖片會從左向右且從上到下整個鋪滿盒子。

background-repeat：no-repeat；

關閉默認平鋪狀態，只在盒子左上角顯示一個完整的背景圖片。

background-repeat：repeat-x；

沿著x軸方向在盒子內最頂部橫向平鋪背景圖片。

background-repeat：repeat-y；

沿著y軸方向在盒子內最左側縱向平鋪背景圖片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景屬性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        .bg-repeat {
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="bg-image">背景平鋪默認值</div>
    <div class="bg-image bg-repeat">背景不平鋪</div>
    <div class="bg-image bg-repeatx">x軸方向平鋪背景圖片</div>
    <div class="bg-image bg-repeaty">y軸方向平鋪背景圖片</div>
</body>
</html>

效果：

背景圖片位置

background-position：x y；

x軸和y軸的值可以是方位名詞或者精確數值都可。

方位名詞：top、bottom、center、left、right。

當屬性值使用方位名詞時如果只寫一個值，則第二個值默認為居中狀態。

當屬性值使用精確數值時如果只寫一個值，則默認是x軸方向的值，y軸方向默認垂直居中。

如果參數是方位詞和精確單位混合使用時，默認第一個值是x值，第二個是y值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景屬性</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            border: 1px solid;
        }
        .bg-position {
            background-repeat: no-repeat;
            background-position: center top;
        }
        .bg-position2 {
            background-repeat: no-repeat;
            background-position: right;
        }
        .bg-position3 {
            background-repeat: no-repeat;
            background-position: 20px 50px;
        }
        .bg-position4 {
            background-repeat: no-repeat;
            background-position: 20px ;
        }
        .bg-position5 {
            background-repeat: no-repeat;
            background-position: 80px bottom ;
        }
    </style>
</head>
<body>
    <div class="bg-image bg-position">背景圖片存放位置1</div>
    <div class="bg-image bg-position2">背景圖片存放位置,設置一個值</div>
    <div class="bg-image bg-position3">背景圖片存放位置精確單位值</div>
    <div class="bg-image bg-position4">背景圖片存放位置精確單位值</div>
    <div class="bg-image bg-position5">背景圖片存放位置混合使用</div>

</body>
</html>

效果：

背景圖像固定

background-attachment：scroll | fixed；

背景圖像在頁面的某一處固定不動或者隨頁面的其余部分滾動。可以制作視差滾動效果。

background-attachment：scroll ；

默認值，背景圖像固定在頁面上，隨著滾動條滾動而移動。

background-attachment：fixed；

背景圖像固定在某一區域，滾動條滑動時位置不變。

body {
            background-image: url(../images/43619545307190.png);
            background-repeat: no-repeat;
            background-position: center top;
            background-attachment: fixed;
        }

背景屬性復合寫法

background：背景顏色、背景圖片地址、背景平鋪、背景圖像滾動、背景圖片位置；

沒有特定書寫順序，按需使用屬性。

背景顏色半透明

實現背景顏色半透明效果。

background：rgb（0,0,0, 0.3）；

最后一個參數是alpha透明度，取值范圍在0~1之間。

總結：

屬性	定義	值
Background-color	背景顏色	Rgb值 \| 十六進制 \| 顏色英文單詞
Background-image	背景圖片	Url（圖片路徑）
Background-repeat	背景平鋪	Repeat \| no-repeat \|repeat-x \|repeat-y
Background-position	背景固定	x軸和y軸。方向名詞或者精確數值
Background-attachment	背景附著	Scroll（固定在頁面上）\| fixed（與滾動條固定）
背景復合寫法	代碼簡潔	背景顏色、圖片地址、平鋪、滾動、位置。
背景顏色半透明	顯示效果	Background：rgba（0,0,0，0~1）

在線咨詢

上一篇：CSS的字體
下一篇：微信游戲開發：連接社交與娛樂的創新之路

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS background屬性

ackground屬性

例1：為網頁背景制作水印效果。

例2、為網頁背景制作頂部花邊效果。

例3、為網頁背景制作漸變背景。

例4：設置網頁的背景圖片位于頁面中心，且不隨垂直滾動條的滾動而滾動。

文章預告

小海教材

小海聲明

背景顏色

背景圖片

背景平鋪

背景圖片位置

背景圖像固定

背景屬性復合寫法

背景顏色半透明

您的項目需求