CSS body背景圖像問題

可以，這個工程，海洋圖片在後臺顯示但是重複了4次來填滿整個屏幕。CSS body背景圖像問題

<style type="text/css"> 
    body {background-image:url('ocean.png');} 
</style> 
<body> 

</body>

然後換

body {background-image:url('ocean.png') no-repeat center center;}

現在什麼也不顯示背景picturewise。

2012-02-09 lilzz

這裏是你如何能做到這一點，它延伸到屏幕（注：全高/寬：如果它是不正確的比例，有些失真會發生）：

body { 
background-image: url(ocean.png); 
background-repeat: no-repeat; 
background-size: 100%; 
}

IIRC，背景大小和能夠寫入不帶引號的url（...）是CSS3標準的一部分。

2012-02-09 02:50:10 chucksmash

因爲background-image不能接受更多參數 - 將其更改爲background: url...，這是將所有這些參數設置爲一行的正確屬性。

body {background: url('ocean.png') no-repeat center center;}

2012-02-09 02:39:58 Joe

好的，如何將它縱向和橫向拉伸以填滿整個屏幕。 body {background：url（'ocean.png'）無重複中心; 寬度：100％; 身高：100％;}這是行不通的。 – lilzz 2012-02-09 02:45:06

是的，因爲你將它設置爲「不重複」。將其改爲「重複」，它將在水平和垂直方向重複。 – Joe 2012-02-09 02:47:21

我只想讓圖片的一個實例橫向和縱向拉伸， – lilzz 2012-02-09 02:52:29

試試這樣說：

body { 
background: url('ocean.png'); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-position: center; 
}

2012-02-09 02:43:37

可以大小背景屬性的背景圖片如下：

背景：網址（「ocean.png」）不重複頂部中心100％的汽車;

或

background-size：100％auto;

第一個參數是寬度，第二個參數是高度。第一個例子將圖片放在頂部居中，並將其拉伸以填充瀏覽器窗口的寬度，並按比例設置高度。您也可以使用「覆蓋」來代替「100％自動」，瀏覽器將以任何需要的方式填充圖像以填充背景。

注意：這是CSS3，因此後臺大小隻適用於較新的瀏覽器，IE9，Firefox4等。

2012-02-09 03:57:17 Adam

回答