首頁  >  文章  >  web前端  >  css background-image如何平鋪?

css background-image如何平鋪?

黄舟
黄舟原創
2017-06-21 16:16:5715784瀏覽

以前做網頁佈局的時候,一個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:無背景圖。

5ef2ce33490af39d5a3f02daf911833d:使用絕對或相對位址指定背景圖片

8953c08a228a5c6ca316e79e647e221c:使用線性漸層建立背景圖片。 (CSS3)

ac6918b5246240a756e60820af071212:使用徑向(放射性)漸層建立背景影像。 (CSS3)

4ad42c76c7edc8b6342f1f2b543e8182:使用重複的線性漸層建立背景影像。 (CSS3)

7273e5e9c55e30c97b3f5a0606202adf:使用重複的徑向(放射性)漸變創建背景圖像。 (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%,我這裡試驗了下是鋪滿的,你再看看有沒有別的屬性影響了的。

以上是css background-image如何平鋪?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn