溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

css3中常用的背景屬性是什么

發(fā)布時(shí)間：2022-01-13 09:44:08 來(lái)源：億速云 閱讀：132 作者：iii 欄目：web開(kāi)發(fā)

這篇文章主要介紹“css3中常用的背景屬性是什么”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“css3中常用的背景屬性是什么”文章能幫助大家解決問(wèn)題。

常用背景屬性有：1、background-color；2、background-image；3、background-repeat；4、background-position；5、background-size；6、background。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在制作網(wǎng)頁(yè)時(shí)我們往往需要在網(wǎng)頁(yè)中添加一些背景顏色、背景圖像讓網(wǎng)頁(yè)更加美觀，吸引訪問(wèn)者的眼球。CSS 中提供了一系列用于設(shè)置 HTML 元素背景效果的屬性，如下所示：

  • background-color：設(shè)置元素的背景顏色；

  • background-image：設(shè)置元素的背景圖像；

  • background-repeat：控制背景圖像是否重復(fù)；

  • background-attachment：控制背景圖像是否跟隨窗口滾動(dòng)；

  • background-position：控制背景圖像在元素中的位置；

  • background-size：設(shè)置背景圖像的尺寸；

  • background-origin：設(shè)置 background-position 屬性相對(duì)于什么位置來(lái)定位背景圖像；

  • background-clip：設(shè)置背景圖像的顯示區(qū)域；

  • background：背景屬性的縮寫(xiě)，可以在一個(gè)聲明中設(shè)置所有的背景屬性。

1. background-color

您可以使用 background-color 屬性為元素設(shè)置一個(gè)背景顏色，該屬性支持以下幾種屬性值：

值描述
color_name使用具體顏色名稱為元素設(shè)置背景顏色（例如 red）
hex_number使用十六進(jìn)制碼為元素設(shè)置背景顏色（例如 #ff0000）
rgb_number使用 rgb() 函數(shù)為元素設(shè)置背景顏色（例如 rgb(255,0,0)）
transparent默認(rèn)值，設(shè)置背景顏色為透明，大多數(shù)情況下我們并不會(huì)用到它。但如果您不希望某個(gè)元素?fù)碛斜尘邦伾?，或者不希望用戶?duì)瀏覽器的設(shè)置（比如開(kāi)啟夜間模式、護(hù)眼模式）影響到您的設(shè)計(jì)，那么就可以使用 transparent 來(lái)將顏色設(shè)置為透明的
inherit從父元素繼承對(duì)背景顏色的設(shè)置


【示例】使用 background-color 為元素設(shè)置背景顏色：

復(fù)制純文本復(fù)制
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: white;
        background-color: blue;
        margin: 20px;   /*設(shè)置外邊距為 20px*/
        padding: 20px;  /*設(shè)置內(nèi)邊距為 20px*/
        border: 10px dotted yellow;  /*設(shè)置一個(gè)寬 10px 的黃色虛線邊框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-color 屬性</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: white;
        background-color: blue;
        margin: 20px;   /*設(shè)置外邊距為 20px*/
        padding: 20px;  /*設(shè)置內(nèi)邊距為 20px*/
        border: 10px dotted yellow;  /*設(shè)置一個(gè)寬 10px 的黃色虛線邊框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-color 屬性</p>
</body>
</html>

運(yùn)行結(jié)果如下圖所示：

css3中常用的背景屬性是什么
圖：background-color 屬性演示


通過(guò)運(yùn)行結(jié)果可以看出 background-color 屬性能夠?yàn)樵卦O(shè)置一種純色的背景，這種顏色會(huì)填充元素的內(nèi)容、內(nèi)邊距以及邊框區(qū)域（也可以理解為邊框及以內(nèi)的所有區(qū)域），對(duì)于元素邊框以外的區(qū)域（外邊距）則沒(méi)有影響。

2. background-image

background-image 用來(lái)為某個(gè)元素設(shè)置背景圖像，默認(rèn)情況下瀏覽器會(huì)從元素內(nèi)容的左上角開(kāi)始（若有內(nèi)邊距則從元素內(nèi)邊距區(qū)域的左上角開(kāi)始），在水平和垂直方向上重復(fù)背景圖像，以填充整個(gè)元素區(qū)域，您可以使用 background-repeat 屬性來(lái)控制背景圖像是否重復(fù)或如何重復(fù)。

background-image 屬性的可選值如下：

值描述
url('URL')指向圖像的路徑，可以將 url() 看作是一個(gè)函數(shù)，括號(hào)中的 URL 為圖像的具體路徑
none默認(rèn)值，不顯示背景圖像
inherit從父元素繼承背景圖像的設(shè)置


【示例】使用 background-image 屬性將圖片【css3中常用的背景屬性是什么】設(shè)置為元素的背景圖像：

復(fù)制純文本復(fù)制
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: red;
        background-image: url('./bg-image.png');
        margin: 20px;   /*設(shè)置外邊距為 20px*/
        padding: 20px;  /*設(shè)置內(nèi)邊距為 20px*/
        border: 10px dotted red;  /*設(shè)置一個(gè)寬 10px 的紅色虛線邊框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-image 屬性</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: red;
        background-image: url('./bg-image.png');
        margin: 20px;   /*設(shè)置外邊距為 20px*/
        padding: 20px;  /*設(shè)置內(nèi)邊距為 20px*/
        border: 10px dotted red;  /*設(shè)置一個(gè)寬 10px 的紅色虛線邊框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-image 屬性</p>
</body>
</html>

運(yùn)行結(jié)果如下圖所示：

css3中常用的背景屬性是什么
圖：background-image 屬性演示


背景圖像的覆蓋區(qū)域與背景顏色相同，同樣會(huì)填充元素的內(nèi)容、內(nèi)邊距以及邊框區(qū)域，對(duì)于元素邊框以外的區(qū)域（外邊距）則沒(méi)有影響。

3. background-repeat

默認(rèn)情況下背景圖像會(huì)從元素內(nèi)容的左上角開(kāi)始（若有內(nèi)邊距則從元素內(nèi)邊距區(qū)域的左上角開(kāi)始），在水平和垂直方向上重復(fù)背景圖像以填充整個(gè)元素區(qū)域（不包括元素的外邊距區(qū)域），您可以使用 background-repeat 屬性用來(lái)設(shè)置背景圖像是否重復(fù)或如何重復(fù)，該屬性的可選值如下：

值描述
repeat默認(rèn)值，背景圖像將在垂直方向和水平方向上重復(fù)
repeat-x背景圖像僅在水平方向上重復(fù)
repeat-y背景圖像僅在垂直方向上重復(fù)
no-repeat背景圖像僅顯示一次，不在任何方向上重復(fù)
inherit從父元素繼承 background-repeat 屬性的設(shè)置


【示例】使用 background-repeat 屬性讓背景圖像只在水平方向上重復(fù)：

復(fù)制純文本復(fù)制
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url('./bg-image.png');
        background-repeat: repeat-x;
        margin: 20px;   /*設(shè)置外邊距為 20px*/
        padding: 20px;  /*設(shè)置內(nèi)邊距為 20px*/
        border: 10px dotted red;  /*設(shè)置一個(gè)寬 10px 的紅色虛線邊框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-repeat 屬性</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url('./bg-image.png');
        background-repeat: repeat-x;
        margin: 20px;   /*設(shè)置外邊距為 20px*/
        padding: 20px;  /*設(shè)置內(nèi)邊距為 20px*/
        border: 10px dotted red;  /*設(shè)置一個(gè)寬 10px 的紅色虛線邊框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-repeat 屬性</p>
</body>
</html>

運(yùn)行結(jié)果如下圖所示：

css3中常用的背景屬性是什么
圖：background-repeat 屬性演示

4. background-position

background-position 屬性用來(lái)設(shè)置背景圖像的起始位置，該屬性的可選值如下：

值描述
left top（左上）、
left center（左中）、
left bottom（左下）、
right top（右上）、
right center（右中）、
right bottom（右下）、
center top（中上）、
center center（居中）、
center bottom（中下）		使用一些關(guān)鍵詞表示背景圖像的位置，如果您僅設(shè)置第一個(gè)關(guān)鍵詞，那么第二個(gè)將默認(rèn)為 center
x% y%使用百分比表示背景圖像距離元素左上角的距離，x% 為水平方向，y% 為垂直方向，左上角為 0% 0%，右下角是 100% 100%，如果您僅設(shè)置第一個(gè)值，那么另一個(gè)值將是 50%，默認(rèn)值為 0% 0%
xpos ypos使用像素（px）或者其它 CSS 單位表示背景圖像距離元素左上角的距離，xpos 為水平方向，ypos 為垂直方向，左上角為 0px 0px，右下角視元素的尺寸而定，百分比和單位的形式可以混用，如果您僅設(shè)置第一個(gè)值，那么另一個(gè)值將默認(rèn)為 50%


【示例】使用 background-position 屬性來(lái)設(shè)置背景圖像的位置：

復(fù)制純文本復(fù)制
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url('./bg-image.png');
        background-repeat: no-repeat;
        background-position: 0% 50%;
        margin: 20px;   /*設(shè)置外邊距為 20px*/
        padding: 20px;  /*設(shè)置內(nèi)邊距為 20px*/
        border: 10px dotted red;  /*設(shè)置一個(gè)寬 10px 的紅色虛線邊框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-position 屬性</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        color: black;
        background-image: url('./bg-image.png');
        background-repeat: no-repeat;
        background-position: 0% 50%;
        margin: 20px;   /*設(shè)置外邊距為 20px*/
        padding: 20px;  /*設(shè)置內(nèi)邊距為 20px*/
        border: 10px dotted red;  /*設(shè)置一個(gè)寬 10px 的紅色虛線邊框*/
    }
    </style>
</head>
<body>
    <p id="bg">background-position 屬性</p>
</body>
</html>

運(yùn)行結(jié)果如下圖所示：

css3中常用的背景屬性是什么
圖：background-position 屬性演示

5. background-size

background-size 屬性用來(lái)設(shè)置背景圖像的尺寸，該屬性的可選值如下：

值描述
xpos ypos使用像素（px）或其它 CSS 單位來(lái)設(shè)置背景圖像的高度和寬度，xpos 表示寬度，ypos 表示高度，如果只設(shè)置第一個(gè)值，那么第二個(gè)值將被設(shè)置為默認(rèn)值 auto（自動(dòng)）
x% y%使用百分比表示背景圖像相對(duì)于所在元素寬度與高度的百分比，x% 表示寬度，y% 表示高度，如果只設(shè)置第一個(gè)值，那么第二個(gè)值將被設(shè)置為默認(rèn)值 auto（自動(dòng)）
cover保持背景圖像的橫縱比例并將圖像縮放至足夠大，使背景圖像可以完全覆蓋元素所在的區(qū)域，這么做可能會(huì)導(dǎo)致背景圖像的某些部分超出元素區(qū)域而無(wú)法顯示
contain保持背景圖像的橫縱比例并將圖像縮放至足夠大，使背景圖像可以完整的顯示在元素所在區(qū)域，背景圖像可能無(wú)法完全覆蓋整個(gè)元素區(qū)域


【示例】使用 background-size 屬性設(shè)置背景圖像的尺寸，并將背景圖像橫向鋪滿整個(gè)元素區(qū)域：

復(fù)制純文本復(fù)制
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    body {
        background-image: url('./bg-image.png');
        background-repeat: repeat-x;
        background-size: contain;
    }
    </style>
</head>
<body>
    <p>background-size 屬性</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    body {
        background-image: url('./bg-image.png');
        background-repeat: repeat-x;
        background-size: contain;
    }
    </style>
</head>
<body>
    <p>background-size 屬性</p>
</body>
</html>

運(yùn)行結(jié)果如下圖所示：

css3中常用的背景屬性是什么
圖：background-size 屬性演示

6. background

background 是背景屬性的簡(jiǎn)寫(xiě)形式，通過(guò)它不僅可以為元素設(shè)置某個(gè)背景屬性，還可以同時(shí)設(shè)置多個(gè)或者所有的背景屬性。在設(shè)置多個(gè)背景屬性時(shí)并沒(méi)有固定的順序，但推薦使用如下順序進(jìn)行設(shè)置：

background-color || background-image || background-position [/ background-size]? || background-repeat || background-attachment || background-origin || background-clip

在設(shè)置多個(gè)背景屬性時(shí)，有以下幾點(diǎn)需要注意：

  • 每個(gè)屬性之間使用空格進(jìn)行分隔；

  • 如果同時(shí)設(shè)置 background-position 和 background-size 屬性，這兩個(gè)屬性之間需要使用斜線 / 分隔，并且需要遵循 background-position 屬性在前 background-size 屬性在后的順序；

  • 如果同時(shí)設(shè)置 background-origin 和 background-clip 屬性，需要遵循 background-origin 屬性在前 background-clip 屬性在后的順序。如果 background-origin 與 background-clip 屬性的值相同，則可以只設(shè)置一個(gè)值。


【示例】通過(guò) background 同時(shí)設(shè)置多個(gè)背景屬性：

復(fù)制純文本復(fù)制
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        background: #ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box;
        margin: 20px;   /*設(shè)置外邊距為 20px*/
        padding: 20px;  /*設(shè)置內(nèi)邊距為 20px*/
        border: 10px dotted red;  /*設(shè)置一個(gè)寬 10px 的紅色虛線邊框*/
    }
    </style>
</head>
<body>
    <p id="bg">background 屬性</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    #bg {
        background: #ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box;
        margin: 20px;   /*設(shè)置外邊距為 20px*/
        padding: 20px;  /*設(shè)置內(nèi)邊距為 20px*/
        border: 10px dotted red;  /*設(shè)置一個(gè)寬 10px 的紅色虛線邊框*/
    }
    </style>
</head>
<body>
    <p id="bg">background 屬性</p>
</body>
</html>

運(yùn)行結(jié)果如下圖所示：

css3中常用的背景屬性是什么
圖：background 屬性演示

background 屬性還支持設(shè)置多組屬性值（比如上面示例中的 #ccc url('./bg-image.png') 0px 0px/contain repeat-x border-box就可以看作是一組屬性），每組屬性值之間使用逗號(hào),分隔。但需要注意的是 background-color 屬性不能設(shè)置多個(gè)，并且只能在最后一組屬性值中設(shè)置。

如果設(shè)置的多組屬性中，背景圖像之間存在重疊，那么前面設(shè)置的背景圖像會(huì)覆蓋在后面的背景圖像之上。示例代碼如下：

復(fù)制純文本復(fù)制
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    body {
        background: url("./css.png") 10px 10px/60px 60px no-repeat padding-box,
                    url("./css.png") 50px 30px/120px 120px no-repeat content-box,
                    url("./css.png") 140px 40px/200px 100px no-repeat content-box #58a;
    }
    </style>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>CSS背景</title>
    <style>
    body {
        background: url("./css.png") 10px 10px/60px 60px no-repeat padding-box,
                    url("./css.png") 50px 30px/120px 120px no-repeat content-box,
                    url("./css.png") 140px 40px/200px 100px no-repeat content-box #58a;
    }
    </style>
</head>
<body>
</body>
</html>

運(yùn)行結(jié)果如下圖所示：

css3中常用的背景屬性是什么
圖：多重背景層疊效果

關(guān)于“css3中常用的背景屬性是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手