CSS3背景屬性有哪些

本篇內(nèi)容介紹了“CSS3背景屬性有哪些”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

 CSS3 背景

背景主要包括五個(gè)屬性： 

1· background-color（ 背景 顏色） 

2· background-image（ 背景 圖片） 

3· background-repeat（ 背景 圖片 展示 方式） 

4· background-attachment（ 背景 圖片 是 固定 還是 滾動(dòng)） 

5· background-position（ 背景 圖片 位置） 

可以單獨(dú)寫， 也可以將這些屬性串在 一起使用。

1. background-color 屬性，用來設(shè)置元素的背景顏色， 其默認(rèn)值為“ transparent”， 不設(shè)置任何顏色情況下是透明色。

2. background-image 屬性，用來設(shè)置元素的背景圖片， 默認(rèn)值為“ none”，< url> 是指背景圖片的地址， 這個(gè)地址可以是相對地址， 也可以是絕對地址。

3. background-repeat 屬性，用來設(shè)置元素背景圖片在元素的盒模型中的鋪放格式， 其默認(rèn)為“ repeat”， 也就是背景圖片沿元素的X軸和Y軸同時(shí)平鋪，“ repeat- x”表示的是元素背景圖片沿元素 的X軸平鋪， Y軸不進(jìn)行任何鋪 放；“ repeat- Y” 剛好相反， 元素背景圖片沿元素的Y軸平鋪， X軸不進(jìn)行任何鋪 放；“ no- repeat”和 默認(rèn)值“ repeat” 相反， 表示背景圖片不做任何鋪放。

http:/ /www.iis7.com/b/plc/

4. background-attachment 屬性，用來設(shè)置元素背景圖片是否固定或者隨著頁面的其余部分滾動(dòng)， 其默認(rèn)值為“ scroll”， 表示背景圖片會(huì)隨著瀏覽器滾動(dòng)條一起滾動(dòng)， 而取值為“ fixed” 時(shí)， 背景圖片固定不動(dòng)。 background-attachment 取值為“ fixed” 時(shí)， 一般運(yùn)用在html或 body標(biāo)簽上， 使用在其他標(biāo)簽上不能達(dá)到固定效果。

5. background-position 屬性，用來設(shè)置元素背景圖片的位置， 其默認(rèn)值為（ 0，0）||（ 0%， 0%）||（ lefttop）， 其值可以是具體的百分?jǐn)?shù)或數(shù)值設(shè)置（ 可以是負(fù)值），也可以使用關(guān)鍵詞left、center、top、right、top、bottom配合設(shè)置，與背景相關(guān)的新增屬關(guān)于background屬性的用法相信很多讀者都已經(jīng)熟悉了。 在CSS3中， background 屬性 依然保持以前的用法， 只是追加了一些與背景相關(guān)的屬性。 

1· background- origin： 指定繪制背景圖片的起點(diǎn)。 

2· background- clip： 指定背景圖片的顯示范圍。 

3· background- break： 指定內(nèi)聯(lián)元素的背景圖片進(jìn)行平鋪時(shí)的循環(huán)方式。

4·background-size：指定背景圖片的尺寸大小，在CSS3中，可以使用background-size屬性來指定背景圖片的尺寸，可以控制背景圖片在水平和垂直兩個(gè)方向的縮放， 也可以控制圖片拉伸覆蓋 背景區(qū)域的方式， 甚至還可以截取背景圖片。 背景圖片能夠自適應(yīng)元素盒子的大小， 實(shí)現(xiàn)與模塊大小完全適應(yīng)的背景圖片， 避免了因區(qū)塊尺寸不同而需要設(shè)計(jì)不同的背景圖片。

background-size共有五種屬性值，每一種屬性值的作用如下： 

-auto： 默認(rèn)值。 將保持背景片的原始高度和寬度。 

-<length>： 取具體的整數(shù)值（ 例如 px 值）， 將改變背景圖片的大小。

-<percentage>：取值為百分值，可以是0%～100%，此時(shí)，同樣改變背景圖片的大小，但此值是相對于元素的寬度來進(jìn)行計(jì)算，并不是根據(jù)背景圖片的寬度來進(jìn)行計(jì)算。 

-cover： 將背景圖片放大，以適合鋪滿整個(gè)容器。 但這種方法會(huì)致使背景圖片失真。 

-contain： 保持背景圖像本身的寬和高比例， 將背景圖像縮放到寬度或高度正好適應(yīng)所定義背景容器的區(qū)域。 當(dāng) background- size 取值為固定數(shù)值（ length） 和百分比值（ percentage） 時(shí)可以 設(shè)置兩個(gè)值， 也可以設(shè)置一個(gè)值。只取一個(gè)值時(shí)， 指定了背景圖片的寬度， 第二個(gè)值相當(dāng)于auto， 也就是指定了高度。 在這種情況下， auto值設(shè)定 之后能夠讓背景圖片的高度自動(dòng)地按照比例縮放。

“CSS3背景屬性有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！