Question

我试图添加一个带有模糊效果的背景元素（见此处）

.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 -->

背景重叠一切。我无法看到我的身体元素，无论我在哪里移动背景图像元素，其余的东西都不可见。

Answer 1

将背景元素设为负z-index，将其置于其父级之下。

＆＃13;

.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;
}

＆＃13;

<div class="background-image">
</div>

<h1>Text over image</h1>

＆＃13;

更好的选择是使用伪元素而不是标记：

＆＃13;

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;
}

＆＃13;

<h1>Text over image</h1>

＆＃13;

背景元素审阅身体元素

1 个答案: