Css入門: background-image（背景圖片）

介紹

CSS的background-image屬性用于設(shè)置元素的背景圖片。通過使用背景圖片，可以為網(wǎng)頁添加視覺效果和吸引力。

公司主營業(yè)務(wù)：成都做網(wǎng)站、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)建站是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)建站推出徐水免費做網(wǎng)站回饋大家。

語法

background-image屬性的語法如下：

selector {
  background-image: url("image.jpg");
}

其中，selector是要應(yīng)用背景圖片的元素的選擇器，url("image.jpg")是圖片的URL地址。

示例

以下示例演示了如何使用background-image屬性：

body {
  background-image: url("background.jpg");
}

上述代碼將body元素的背景圖片設(shè)置為名為background.jpg的圖片。

重復(fù)背景圖片

默認情況下，背景圖片會在元素中重復(fù)顯示?？梢允褂胋ackground-repeat屬性來控制背景圖片的重復(fù)方式。

background-repeat屬性有以下幾個值：

• repeat: 默認值，背景圖片在水平和垂直方向上重復(fù)。
• repeat-x: 背景圖片只在水平方向上重復(fù)。
• repeat-y: 背景圖片只在垂直方向上重復(fù)。
• no-repeat: 背景圖片不重復(fù)。

以下示例演示了如何使用background-repeat屬性：

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}

上述代碼將body元素的背景圖片設(shè)置為名為background.jpg的圖片，并且不重復(fù)顯示。

定位背景圖片

可以使用background-position屬性來控制背景圖片的位置。

background-position屬性有以下幾個值：

• left top: 背景圖片位于左上角。
• left center: 背景圖片位于左側(cè)中間。
• left bottom: 背景圖片位于左下角。
• center top: 背景圖片位于中間頂部。
• center center: 背景圖片位于中間。
• center bottom: 背景圖片位于中間底部。
• right top: 背景圖片位于右上角。
• right center: 背景圖片位于右側(cè)中間。
• right bottom: 背景圖片位于右下角。

以下示例演示了如何使用background-position屬性：

body {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

上述代碼將body元素的背景圖片設(shè)置為名為background.jpg的圖片，并且在中間顯示。

總結(jié)

通過使用CSS的background-image屬性，可以為網(wǎng)頁元素添加背景圖片，從而增加視覺效果和吸引力?？梢允褂胋ackground-repeat屬性控制背景圖片的重復(fù)方式，使用background-position屬性控制背景圖片的位置。

當前標題：Css入門:background-image（背景圖片）
轉(zhuǎn)載來源：http://m.fisionsoft.com.cn/article/dhespoe.html