背景元素越過正文元素

我試圖添加具有模糊效果的背景要素（這裏看到）背景元素越過正文元素

.background-image { 
    position:absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    background-image: url('bg.jpg'); 
    background-size: cover; 
    display: block; 
    filter: blur(5px); 
    -webkit-filter: blur(5px); 
    height: 800px; 
    left: 0; 
    position: fixed; 
    right: 0; 
    z-index: 100; 
}

然而，當我把它放在我的HTML：

<body> 
    <main> 
     <div> 
     <div class="background-image"></div> 

      <div class="homestrip"> 
       <!-- rest of stuff goes here -->

背景重疊一切。我看不到我的身體元素，無論我移動背景圖像元素的位置，我的其他東西都不可見。

來源

2017-08-10 Freeman

給出背景元素爲負的z-index將其置於其父項下。

.background-image { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background-image: url('http://lorempixel.com/1200/1200'); 
 
    background-size: cover; 
 
    display: block; 
 
    filter: blur(5px); 
 
    -webkit-filter: blur(5px); 
 
    height: 800px; 
 
    left: 0; 
 
    position: fixed; 
 
    right: 0; 
 
    z-index: -1; 
 
} 
 

 
body { 
 
    color: yellow; 
 
}

<div class="background-image"> 
 
</div> 
 

 
<h1>Text over image</h1>

一個更好的選擇是使用僞元件代替標記：

body::before { 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    background-size: cover; 
 
    display: block; 
 
    filter: blur(5px); 
 
    -webkit-filter: blur(5px); 
 
    height: 800px; 
 
    left: 0; 
 
    position: fixed; 
 
    right: 0; 
 
    z-index: -1; 
 
    content: url('http://lorempixel.com/1200/1200'); 
 
} 
 

 
body { 
 
    color: yellow; 
 
}

<h1>Text over image</h1>

來源

2017-08-10 18:09:45

背景元素越過正文元素

回答

相關問題