這篇文章主要講解了“CSS的背景屬性的描述和屬性值說(shuō)明”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS的背景屬性的描述和屬性值說(shuō)明”吧！
創(chuàng)新互聯(lián)公司專(zhuān)注于北票網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供北票營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，北票網(wǎng)站制作、北票網(wǎng)頁(yè)設(shè)計(jì)、北票網(wǎng)站官網(wǎng)定制、微信平臺(tái)小程序開(kāi)發(fā)服務(wù)，打造北票網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供北票網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。
| Property | 描述 |
|---|---|
| background-color | 設(shè)置元素的背景顏色。 |
| background-image | 把圖像設(shè)置為背景。 |
| background-size | 設(shè)置背景圖像的大小。 |
| background-origin | 設(shè)置背景圖像的定位區(qū)域。 |
| background-clip | 設(shè)置背景圖像的的繪畫(huà)區(qū)域。 |
| background-position | 設(shè)置背景圖像的起始位置。 |
| background-repeat | 設(shè)置背景圖像是否及如何重復(fù)。 |
| background-attachment | 背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。 |
| background | 簡(jiǎn)寫(xiě)屬性，作用是將背景屬性設(shè)置在一個(gè)聲明中。 |
background-color 屬性定義了元素的背景顏色.
頁(yè)面的背景顏色使用在body的選擇器中:
CSS中，顏色值通常以以下方式定義:
十六進(jìn)制 - 如："#ff0000"
RGB - 如：“rgb(255,0,0)”
顏色名稱(chēng) - 如：“red”
以下實(shí)例中, h2, p, 和 div 元素?fù)碛胁煌谋尘邦伾?
| 值 | 說(shuō)明 |
|---|---|
| color | 指定背景顏色。在CSS顏色值近可能的尋找一個(gè)顏色值的完整列表。 |
| transparent | 指定背景顏色應(yīng)該是透明的。這是默認(rèn) |
| inherit | 指定背景顏色，應(yīng)該從父元素繼承 |
background-image 屬性設(shè)置一個(gè)元素的背景圖像。
元素的背景是元素的總大小，包括填充和邊界（但不包括邊距）。
默認(rèn)情況下，background-image放置在元素的左上角，并重復(fù)垂直和水平方向。寧波男科醫(yī)院http://www.jzspfk.com/
提示：請(qǐng)?jiān)O(shè)置一種可用的背景顏色，這樣的話(huà)，假如背景圖像不可用，可以使用背景色帶代替。
| 值 | 說(shuō)明 |
|---|---|
| url(‘URL’) | 圖像的URL |
| none | 無(wú)圖像背景會(huì)顯示。這是默認(rèn) |
| linear-gradient() | 創(chuàng)建一個(gè)線(xiàn)性漸變的 “圖像”(從上到下) |
| radial-gradient() | 用徑向漸變創(chuàng)建 “圖像”。 (center to edges) |
| repeating-linear-gradient() | 創(chuàng)建重復(fù)的線(xiàn)性漸變 “圖像”。 |
| repeating-radial-gradient() | 創(chuàng)建重復(fù)的徑向漸變 “圖像” |
| inherit | 指定背景圖像應(yīng)該從父元素繼承 |
| 值 | 說(shuō)明 |
|---|---|
| length | 設(shè)置背景圖片高度和寬度。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值，第二個(gè)是設(shè)置為 auto(自動(dòng)) |
| percentage | 將計(jì)算相對(duì)于背景定位區(qū)域的百分比。第一個(gè)值設(shè)置寬度，第二個(gè)值設(shè)置的高度。如果只給出一個(gè)值，第二個(gè)是設(shè)置為"auto(自動(dòng))" |
| cover | 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。 |
| contain | 此時(shí)會(huì)保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。 |
background-Origin屬性指定background-position屬性應(yīng)該是相對(duì)位置。
注意:如果背景圖像background-attachment是"固定"，這個(gè)屬性沒(méi)有任何效果。
| 值 | 說(shuō)明 |
|---|---|
| padding-box | 背景圖像填充框的相對(duì)位置 |
| border-box | 背景圖像邊界框的相對(duì)位置 |
| content-box | 背景圖像的相對(duì)位置的內(nèi)容框 |
background-clip屬性指定背景繪制區(qū)域。
| 值 | 說(shuō)明 |
|---|---|
| border-box | 默認(rèn)值。背景繪制在邊框方框內(nèi)（剪切成邊框方框）。 |
| padding-box | 背景繪制在襯距方框內(nèi)（剪切成襯距方框）。 |
| content-box | 背景繪制在內(nèi)容方框內(nèi)（剪切成內(nèi)容方框）。 |
background-position屬性設(shè)置背景圖像位置。如果指定的位置是沒(méi)有任何背景，圖像總是放在元素的左上角。
| 值 | 說(shuō)明 |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | 如果僅指定一個(gè)關(guān)鍵字，其他值將會(huì)是"center" |
| x% y% | 第一個(gè)值是水平位置，第二個(gè)值是垂直。左上角是0％0％。 右下角是100％100％。如果僅指定了一個(gè)值，其他值將是50％。 默認(rèn)值為：0％0％ |
| xpos ypos | 第一個(gè)值是水平位置，第二個(gè)值是垂直。左上角是0 單位可以是像素（0px0px）或任何其他 CSS單位。 如果僅指定了一個(gè)值，其他值將是50％。你可以混合使用 ％和positions |
| inherit | 指定background-position屬性設(shè)置應(yīng)該從父元素繼承 |
默認(rèn)情況下 background-image 屬性會(huì)在頁(yè)面的水平或者垂直方向平鋪。
| 值 | 說(shuō)明 |
|---|---|
| repeat | 背景圖像將向垂直和水平方向重復(fù)。這是默認(rèn) |
| repeat-x | 只有水平位置會(huì)重復(fù)背景圖像 |
| repeat-y | 只有垂直位置會(huì)重復(fù)背景圖像 |
| no-repeat | background-image不會(huì)重復(fù) |
| inherit | 指定background-repea屬性設(shè)置應(yīng)該從父元素繼承 |
background-attachment設(shè)置背景圖像是否固定或者隨著頁(yè)面的其余部分滾動(dòng)。
| 值 | 說(shuō)明 |
|---|---|
| scroll | 背景圖片隨著頁(yè)面的滾動(dòng)而滾動(dòng)，這是默認(rèn)的。 |
| fixed | 背景圖片不會(huì)隨著頁(yè)面的滾動(dòng)而滾動(dòng)。 |
| local | 背景圖片會(huì)隨著元素內(nèi)容的滾動(dòng)而滾動(dòng)。 |
| initial | 設(shè)置該屬性的默認(rèn)值。 閱讀關(guān)于 initial 內(nèi)容 |
| inherit | 指定 background-attachment 的設(shè)置應(yīng)該從父元素繼承。 |
感謝各位的閱讀，以上就是“CSS的背景屬性的描述和屬性值說(shuō)明”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS的背景屬性的描述和屬性值說(shuō)明這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
