CSS3背景隨機剪切我的圖像

Question

我有兩個html頁面（index.html和about.html）在body標籤中具有相同的背景。我使用下列CSS創建背景：

body { 
 
    background: url("http://www.skrenta.com/images/stackoverflow.jpg"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
}

然而，瀏覽器（Firefox和Chrome）不正確定位的形象。由於背景顏色是白色，因此index.html在背景圖像下有一條白線。我假設圖像高度太短。

然而，在about.html的背景圖片下有一塊空白區域，漂白四分之一頁面。

這是怎麼發生的，當我使用相同的CSS。

關於此主題，管理不同屏幕分辨率的背景圖像的最佳方法是什麼？

Answer 1

，我能拿出最好的解決辦法是使用background-attachment: fixed;。這充滿了整個背景和我的形象。

我還沒有想出爲什麼我的CSS以不同的方式顯示我的背景。這是要看的東西。

body { 
 
    background: url("http://www.skrenta.com/images/stackoverflow.jpg"); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
    background-attachment: fixed; 
 
}

Answer 2

嘗試：

background-size:contain; 

contain財產的圖像縮放到最大尺寸，使得它的寬度和高度都可以適應內容區域內。

Answer 3

我更喜歡你先用photoshop拍攝一小部分圖片，然後保存爲網頁和設備，或者通過剪裁工具將其縮小。然後，您會看到一個小尺寸的小圖片。

比類型婁代碼

body { 
 
    background-image: url('http://www.skrenta.com/images/stackoverflow.jpg'); 
 
    background-repeat: repeat; 
 
}