最佳方式

Question

我現在有這樣的代碼：

body { 
 
    margin: 0; 
 
    font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; 
 
    background: #151626; 
 
    width: 100vw; 
 
    height: 100vh; 
 
} 
 

 
.bg { 
 
    margin: 0; 
 
    overflow: hidden; 
 
    position: fixed; 
 
    height: 100vh; 
 
    top: 0; 
 
    bottom: 0; 
 
} 
 
.bg figure { 
 
    background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center; 
 
    background-size: cover; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    transform: scale(1.05); 
 
    filter: blur(10px); 
 
    opacity: 0.5; 
 
}

<div class="bg"><figure></figure></div>

的圖像被用作一個新的平臺，一個站點範圍的背景圖像和沒有理由只是把它作爲背景圖像放在身體中，我希望能夠在其上使用CSS3濾鏡（模糊）+不透明度，這對於我打算在網站的某些部分進行動畫處理都是不利的。

但是，如果我這樣做，我必須使用絕對定位的網站上有點雜亂的所有其他內容。有沒有更好的方式來插入這個圖像作爲背景，而不使用絕對定位？

我非常喜歡CSS3專用的解決方案。

Answer 1

像這樣使用僞元素添加圖像，並且您可以將其他內容置於頂部。

如果您在使用z-index: -1;時遇到問題，可以將圖片保留在後臺，您可以將其刪除並將其替換爲正文的子女position: relative。

body { 
 
    margin: 0; 
 
    font-family: BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; 
 
    background: #151626; 
 
    height: 100vh; 
 
} 
 

 
body::before { 
 
    content: ''; 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: url(http://mortenhjort.dk/food/assets/img/login/bg.jpg) no-repeat center center; 
 
    background-size: cover; 
 
    transform: scale(1.05); 
 
    filter: blur(10px); 
 
    opacity: 0.5; 
 
    z-index: -1; 
 
} 
 

 
div { 
 
    color: white; 
 
    font-size: 30px; 
 
}

<div>Hey there....</div>