學(xué)習(xí)CSS的背景圖像屬性background

2020-03-24 16:15:53

字體：大中小

供稿：網(wǎng)友

CSS的背景屬性“background”提供了眾多屬性值，如顏色、圖像、定位等，為網(wǎng)頁(yè)背景圖像的定義提供了極大的便利?？纯碽ackground提供的屬性值： background : background-color background-image background-repeat background-attachment background-position 從屬性值的名字就可以很明白的看出來(lái)，分別是：顏色、圖像、鋪排、滾動(dòng)、定位，其中background-repeat、background-position必須是在指定了background-image屬性值后才有效。 background-color:transparent color ?！皌ransparent”是background-color的默認(rèn)屬性值（紅色字表示默認(rèn)值），意為背景色透明，也就是無(wú)背景色；而“color”則指的是顏色了，可以是HTML語(yǔ)言支持英文單詞，也可以是十六進(jìn)制的顏色值，當(dāng)然推薦還是使用十六進(jìn)制的顏色值來(lái)表示，比如黑色使用“#000”。 background-image:none url 。默認(rèn)屬性值是無(wú)背景圖，需要使用背景圖時(shí)可用url進(jìn)行導(dǎo)入。 background-repeat:repeat no-repeat repeat-x repeat-y 。默認(rèn)屬性值是背景圖像在縱向和橫向上平鋪，如果不希望圖像平鋪而是以一個(gè)完整的襯圖來(lái)顯示的時(shí)候則使用“no-repeat”，相同的道理在橫向上平鋪則是使用”repeat-x”縱向上平鋪則使用”repeat-y”。 background-attachment:scroll fixed 。“scroll”是背景圖像隨對(duì)像內(nèi)容滾動(dòng)，“fixed”則是背景圖像固定。 background-position:position(length) position(length) 。對(duì)象的背景圖像位置有兩種方式可選擇，一種是使用position（top center bottom left center right）來(lái)定位背景圖像位置，而另一種方式則是使用lefgth（數(shù)值）來(lái)定位，使用數(shù)值需要注意的是，當(dāng)只有一個(gè)數(shù)值時(shí)，這個(gè)值將用于橫坐標(biāo)，縱坐標(biāo)將默認(rèn)是50%，如果有兩個(gè)數(shù)值時(shí)，則分別是橫坐標(biāo)、縱坐標(biāo)。了解并熟悉了以上background屬性及屬性值之后，很容易的就可以對(duì)網(wǎng)頁(yè)的背景圖像做出合適的處理。但是在這里有一個(gè)小技巧，那就是在定義了background-image屬性之后，應(yīng)該定義一個(gè)與背景圖像顏色相近的background-color值，這樣在網(wǎng)速緩慢背景圖像未加載完成或是背景圖像丟失之后，仍然可以提供很好的文字可識(shí)別性。比如背景圖像是一張黑色的底圖，那么文字的顏色自然而然會(huì)選擇淺色調(diào)的甚至白色，如果此時(shí)背景圖像未加載完成或者圖像丟失，那么就需要定義一個(gè)黑色的背景顏色，才可以保持文字的可識(shí)別性
本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS3變換入門

下一篇：css各種選擇器的詳細(xì)介紹