學(xué)習(xí)CSS的背景圖像屬性background
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:25:24 作者:佚名
我要評(píng)論
CSS的背景屬性“background”提供了眾多屬性值,如顏色、圖像、定位等,為網(wǎng)頁(yè)背景圖像的定義提供了極大的便利??纯碽ackground提供的屬性值:
background : background-color | background-image | background-repeat | background-attachment | backgroun
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 。“transparent”是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í)別性。
相關(guān)文章
CSS3 transforms應(yīng)用于背景圖像的解決方法
這篇文章提供了一個(gè)很好的解決方法,當(dāng)您確實(shí)想要旋轉(zhuǎn)背景圖像時(shí),或者在容器元素旋轉(zhuǎn)時(shí)保持背景圖像不變。對(duì)CSS3 transforms應(yīng)用于背景圖像的實(shí)現(xiàn)方法感興趣的朋友跟隨小2019-04-16CSS控制背景圖像平鋪實(shí)現(xiàn)邊框陰影效果
CSS控制背景圖像平鋪,從而實(shí)現(xiàn)區(qū)域邊框陰影的效果,可貴之處是本代碼不管你需要陰影的區(qū)域是多大,它都能自動(dòng)適應(yīng),個(gè)人感覺(jué)還不錯(cuò),具體實(shí)現(xiàn)如下建議收藏下哦2013-08-25css3背景圖片透明疊加屬性cross-fade簡(jiǎn)介及用法實(shí)例
據(jù)說(shuō)iOS6系統(tǒng)(iPhone5)增加了兩個(gè)CSS3屬性,一個(gè)是CSS3 filters – CSS3濾鏡另外一個(gè)是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來(lái)為您介紹cross-fade屬性,感興趣的朋友2013-01-08
使用CSS cross-fade()實(shí)現(xiàn)背景圖像半透明效果的示例代碼
這篇文章主要介紹了使用CSS cross-fade()實(shí)現(xiàn)背景圖像半透明效果的示例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07


