CSS中背景部分編程的示例分析

本篇文章為大家展示了CSS中背景部分編程的示例分析，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

在CSS里面，每個(gè)元素盒子都可以想象成由兩個(gè)圖層組成。

前景層：內(nèi)容（如文本或圖片）和邊框。

背景層：用實(shí)色填充（使用 background-color 屬性），也可以包含任意多個(gè)背景圖片（使用 background-image 屬性），背景圖片疊加在背景顏色之上。

    在 CSS3 被瀏覽器實(shí)現(xiàn)之前，只能在背景顏色上添加一張圖片。而現(xiàn)在，我們可以為背景圖層添加多張圖片（以及 CSS3 漸變）。

CSS背景屬性：

    background-color
    background-image
    background-repeat
    background-position
    background-size
    background-attachment
    background（簡(jiǎn)寫(xiě)屬性）
    background-clip、background-origin、background-break（目前尚未得到廣泛支持）

背景顏色

格式：background-color: 顏色值;
示例：background-color: #caebff;

背景圖片

格式：background-image:url(圖片路徑/圖片文件名);
示例：background-image:url(images/blue_circle.png);

    默認(rèn)情況下背景圖片會(huì) 以元素左上角為起點(diǎn)，沿水平和垂直方向重復(fù)出現(xiàn)，最終填滿(mǎn)整個(gè)背景區(qū)域。

背景重復(fù)

格式：background-repeat: repeat | repeat-x | repeat-y | no-repeat;
示例：background-repeat:repeat-x;
說(shuō)明：

    repeat 默認(rèn)值，水平和垂直方向都重復(fù)，直至填滿(mǎn)元素的背景區(qū)域?yàn)橹埂?br/>    repeat-x 水平方向重復(fù)。
    repeat-y 垂直方向重復(fù)。
    no-repeat 任何方向上都不重復(fù)（只讓背景圖片顯示一次）。

背景位置

    用于控制背景位置的 background-position 屬性，是所有背景屬性中最復(fù)雜的。

該屬性有5個(gè)關(guān)鍵字值，分別是 top、left、bottom、right 和 center，這些關(guān)鍵字中的任意兩個(gè)組合起來(lái)都可以作為該屬性的值。

background-position 屬性同時(shí)設(shè)定元素和圖片的原點(diǎn)。原點(diǎn)決定了元素和圖片中某一點(diǎn)的水平和垂直坐標(biāo)。默認(rèn)情況下，background-position的原點(diǎn)位于左上角。

    第一種情況，使用關(guān)鍵字來(lái)設(shè)定位置。background-position屬性的默認(rèn)值 top、left 控制著水平和垂直方向重復(fù)的起點(diǎn)。如修改 起點(diǎn)位置：p#center {background-position:center center;}（簡(jiǎn)化寫(xiě)法：background-position:center，設(shè)定一個(gè)關(guān)鍵值，則另一個(gè)也會(huì)取相同的值。），背景圖片就會(huì)以段落的中心點(diǎn)為起點(diǎn)。

    第二種情況，使用百分比來(lái)設(shè)定位置。
    示例：background-position:50% 50%;，再把 background-repeat 設(shè)定為 no-repeat，就能實(shí)現(xiàn)了圖片在背景區(qū)域內(nèi)居中的效果。第一個(gè)值表示水平位置，第二個(gè)值表示垂直位置。要是只設(shè)定一個(gè)值，則將其用來(lái)設(shè)定水平位置，而垂直位置會(huì)被設(shè)為 center。

    第三種情況，使用絕對(duì)或相對(duì)單位的數(shù)值。要是使用像素單位來(lái)設(shè)定位置，那么圖片的左上角會(huì)被放在距離元素左上角指定位置的地方。另外，還可以使用負(fù)值，這樣可以把圖片的左上角定位到元素外部，從而在元素中只能看到部分圖片。當(dāng)然也可以給圖片設(shè)定足夠大的正值，把圖片的右下角推到元素外部實(shí)現(xiàn)同樣的效果。

背景尺寸

background-size 是 CSS3 規(guī)定的屬性，用來(lái)控制背景圖片的尺寸。

可設(shè)定的值和含義如下：

    50%：縮放圖片，使其填充背景區(qū)的一半。
    100px 50px：把圖片調(diào)整到 100 像素寬，50 像素高。
    cover：拉大圖片，使其完全填滿(mǎn)背景區(qū)；保持寬高比。
    contain：縮放圖片，使其恰好適合背景區(qū)；保持寬高比。

    注意：把很小的圖片拉大會(huì)導(dǎo)致圖片質(zhì)量失真。

背景粘附

background-attachment屬性控制滾動(dòng)元素內(nèi)的背景圖片是否隨元素滾動(dòng)而滾動(dòng)。

屬性值有：

    scroll。背景圖片隨元素移動(dòng)。

    fixed。背景圖片不會(huì)隨元素滾動(dòng)而移動(dòng)。

    提示：background-attachment:fixed 最常用于給 body 元素中心位置添加淡色水印，讓水印不隨頁(yè)面滾動(dòng)而移動(dòng)。

簡(jiǎn)寫(xiě)背景屬性

示例：body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}
說(shuō)明：聲明中少寫(xiě)了哪個(gè)屬性的值（比如沒(méi)寫(xiě) no-repeat），就會(huì)使用相應(yīng)屬性的默認(rèn)值（ repeat）。

多背景圖片

CSS3 可以給元素背景添加多個(gè)背景圖片。

示例：

CSS p {   

1.     background:   

2.     url(images/turq_spiral.png) 30px -10px no-repeat,   

3.     url(images/pink_spiral.png) 145px 0px no-repeat,   

4.     url(images/gray_spiral.png) 140px -30px no-repeat,  #ffbd75;   

5. }  

背景漸變

漸變，就是在一定長(zhǎng)度內(nèi)兩種或多種顏色之間自然的過(guò)渡。

    提示：漸變是 CSS 幫我們生成的背景圖片。添加漸變可以使用 background-image 屬性，也可以使用簡(jiǎn)寫(xiě) background 屬性。

漸變分兩種：

    線(xiàn)性漸變。從元素的一端延伸到另一端。

    放射性漸變。從元素內(nèi)一點(diǎn)向四周發(fā)散。

廠商前綴

為鼓勵(lì)瀏覽器廠商盡早采用 W3C 的 CSS3 推薦標(biāo)準(zhǔn)，于是就產(chǎn)生了 VSP（Vendor Specific Prefixes，廠商前綴）的概念。

示例：
transform 屬性的標(biāo)準(zhǔn)語(yǔ)法是這樣的：
transform: skewX(-45deg);

由于這個(gè)屬性還沒(méi)有完全定案，為保證在大多數(shù)瀏覽器以及它們的實(shí)驗(yàn)性實(shí)現(xiàn)中能夠使用這個(gè)屬性，應(yīng)該針對(duì)想要支持的瀏覽器為該屬性添加 VSP。每個(gè)瀏覽器只使用各自能理解的屬性聲明：

CSS 

1. -moz-transform:skewX(-45deg); /* Firefox */  

2. -webkit-transform:skewX(-45deg); /* Chrome 及 Safari */  

3. -ms-transform:skewX(-45deg); /* 微軟 Internet Explorer */  

4. -o-transform:skewX(-45deg); /* Opera */  

5. transform:skewX(-45deg); /* 最后是 W3C 標(biāo)準(zhǔn)屬性 */  

以下 CSS3 屬性必須加 VPS：

CSS 

1. border-image translate   

2. linear-gradient transition   

3. radial-gradient background*   

4. transform background-image*   

5. transform-origin   

6. > *針對(duì)背景圖片或漸變  

上述內(nèi)容就是CSS中背景部分編程的示例分析，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。