css background-image如何平鋪?

來源:互聯網
上載者:User
以前做網頁布局的時候,一個div只能設定一張背景圖片,設定多個背景的話,要用多個div嵌套才能實現,這樣相容性比較好。若您的網站要求相容瀏覽器低版本,建議用這種方法。css3的出現,解決了一個div只能設定一個背景的問題,使一個div可以設定多個背景圖片。background-image還可以設定線性漸層,等效果。

關於css3的background,功能很強大,有很多屬性,像background-size等等,這些屬性都可以寫一篇部落格來講述。關於css3background的其他屬性,後面會出部落格來單獨講述!

CSS3/CSS1 background-image 屬性

文法:

background-image:<bg-image> [ , <bg-image> ]*<bg-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

預設值:none

取值:

none:無背景圖。

< url >:使用絕對或相對位址指定背景映像。

< linear-gradient>:使用線性漸層建立背景映像。(CSS3)

< radial-gradient>:使用徑向(放射性)漸層建立背景映像。(CSS3)

< repeating-linear-gradient>:使用重複的線性漸層建立背景映像。(CSS3)

< repeating-radial-gradient>:使用重複的徑向(放射性)漸層建立背景映像。(CSS3)

說明:

設定或檢索對象的背景映像。

如果設定了background-image,同時也建議作者設定background-color用於當背景映像不可見時保持與文本一定的對比。

對應的指令碼特性為backgroundImage。

CSS中如何設展開背景圖片鋪滿螢幕

我寫的CSS代碼是

#bg{width: 100%;height: 100%;background:url(images/beijing.png);}

這樣子他會重複圖片鋪滿螢幕,我想要讓他展開圖片鋪滿螢幕,應該怎麼寫呢?

background:url(images/beijing.png) repeat;


加個屬

background-size:100%;background:url(images/beijing.png) no-repeat;

加個屬background-size:100%;background:url(images/beijing.png) no-repeat; 圖片會失真哦!

要麼是外框限制了,都設成100%,我這裡實驗了下是鋪滿的,你再看看有沒有別的屬性影響了的。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.