位置：固定有背景圖片？

當我在頁面上添加<!DOCTYPE HTML>時，我發現必須將position: fixed;添加到CSS中才能將圖像顯示爲「div」的背景，否則我會得到空白的白色背景。爲什麼這需要這個位置=在這種情況下是固定的？位置：固定有背景圖片？

.background_image{ 
    position: fixed; <-----Why is this needed & Why doesn't static work? 
    background: #000 url(../Images/Image.jpg) center center; 
    width: 100%; 
    height: 100%; 
    min-height:100%; 
    background-size: cover; 
    overflow: hidden; 
}

這裏是示例html。 div中顯然還有其他元素，我正在通過標題中的鏈接導入css。

<body> 
    <div class="background_image"> 
    </div> 
</body>

來源

2016-07-31 TsTeaTime

出現這種情況，是因爲height: 100%作品position: fixed。當你移除這個位置時，它不需要這個height。所以，還有另一種方法可以做到這一點。您可以使用vh單位。刪除位置fixed，並添加此背景此css：

.background_image{ 
    height: 100vh; 
    background: #000 url(../Images/Image.jpg) center center; 
    width: 100%; 
    min-height:100%; 
    background-size: cover; 
    overflow: hidden; 
    }

來源

2016-07-31 09:12:22

謝謝...這個偉大的工作。什麼被認爲是在這裏設置背景的正確方法？固定還是靜態？ – TsTeaTime

@TsTeaTime，在這種情況下保持靜態。背景附件固定，用於實現paralx效果。 –

平均HTML所以頁面必須遵循HTML 5規則

FROM MDN的CSS文檔

位置的CSS屬性選擇替代規則定位元素，設計爲有用腳本動畫效果。

值

靜態

這個關鍵字讓元件使用正常的行爲，那就是它是在流的當前位置佈局。 top，right，bottom， left和z-index屬性不適用。

相對

此關鍵字勾畫出的所有元素，就好像元件沒有定位，並且然後調整元件的位置，而不改變佈局（並因此留下間隙爲在那裏將具有元件一直沒有被定位）。位置的影響：相對於表 - * - 組，錶行，表列，表格單元和表標題元素是未定義的。

絕對

不要爲元素留出空間。相反，將其定位在相對於其最接近定位祖先（如果有的話）的指定位置或其他相對於初始包含塊的位置。絕對地定位框可以有邊距，並且它們不會與任何其他邊緣摺疊。

固定

不要爲元素留出空間。相反，將其定位在相對於屏幕視口的指定位置，並且在滾動時不要將其移動到。打印時，請將其定位在每頁上的固定位置。此值始終創建新的堆疊上下文。當祖先具有與變換屬性設置爲東西比沒有不同，則祖先被用作容器，而不是視

來源

2016-07-31 09:10:51 scaisEdge

您應該使用背景附件屬性與圖像。

background-attachment可以有兩個值中的一個。 background-attachment：fixed | scroll;

position屬性用於定位div元素，p等html元素。所以你不能在圖像中使用它。

你會發現這個鏈接有用

http://www.w3schools.com/cssref/pr_background-attachment.asp

來源

2016-07-31 09:18:53

位置：固定有背景圖片？

回答

相關問題