为什么当我将位置设置为相对时看不到该图像？

Question

我一直在尝试使用 z-index 来创建一种水晶效果，如您所见，事情是这样的，如果我希望标题的背景可见，我需要将其位置设置为绝对位置，但我不这样做知道为什么。该背景图像是相对于 .center_form--header 类的，因为我使用了 z-index，所以它应该获得所有的后部空间来显示，不是吗？

任何人都知道发生了什么事或者可以告诉我这应该如何运作？

form {

  position: relative;

  margin: 0%;

  padding: 0%;

  position: relative;

  width: 100%;

  height: auto;

  display: inline-block;

  background: #f4f7f8;

  border-radius: 0 0 20px 20px;

}

.center_form {

  position: relative;

  width: 50%;

  display: inline-block;

  height: auto;

  text-align: center;

  border-radius: 20px 20px 20px 20px;

  -moz-box-shadow: 1px 1px 15px 1px black;

  -webkit-box-shadow: 1px 1px 15px 1px black;

  box-shadow: 1px 1px 15px 1px black;

}

.center_form--header {

  position: relative;

  border-radius: 20px 20px 0 0;

  height: auto;

  z-index: 5;

}

#formtitlebg {

  position: absolute;

  width: 100%;

  height: 100%;

  background-image: url(https://i.postimg.cc/bw0JjXgn/8-bit-game-wallpaper-42148.jpg);

  background-repeat: no-repeat;

  background-position: center;

  border-radius: 20px 20px 0 0;

  filter: blur(2px);

  -webkit-filter: blur(2px);

  z-index: -5;

}

#formtitle {

  position: relative;

  display: inline-block;

  width: 100%;

  margin: 0;

  padding-top: 2%;

  padding-bottom: 2%;

  border-radius: 20px 20px 0 0;

  text-transform: uppercase;

  font-family: 'Press Start 2P', cursive;

  font-size: 15px;

  text-align: center;

  color: white;

  background-color: rgb(0, 0, 0);

  background-color: rgba(0, 0, 0, 0.4);

}

.center_form--elements input[type="text"] {

  position: relative;

  width: 90%;

  height: 10%;

  margin-top: 2%;

  margin-left: 3%;

  display: block;

  border: none;

  outline: none;

  border-bottom: 1px solid #ddd;

  background: #f4f7f8;

  font-size: 18px;

  margin-right: auto;

}

Answer 1

您需要将背景移动到标题而不是裁剪它。除了标题背景之外，您还可以使用 :before 伪类。在我的示例中，您可以看到我从 CSS 中删除了绝对位置，并且代码变得干净：尝试这样：form {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; margin: 0%;&nbsp; &nbsp; padding: 0%;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; background: #f4f7f8;&nbsp; &nbsp; border-radius: 0 0 20px 20px;}.center_form {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: 50%;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; border-radius: 20px 20px 20px 20px;&nbsp; &nbsp; -moz-box-shadow: 1px 1px 15px 1px black;&nbsp; &nbsp; -webkit-box-shadow: 1px 1px 15px 1px black;&nbsp; &nbsp; box-shadow: 1px 1px 15px 1px black;}.center_form--header {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; border-radius: 20px 20px 0 0;&nbsp; &nbsp; height: auto;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; color: white;&nbsp; &nbsp; padding-bottom: 2%;&nbsp; &nbsp; padding-top: 2%;&nbsp; &nbsp; border-radius: 20px 20px 0 0;}.center_form--header:before{&nbsp; &nbsp; content:'';&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; left: 0;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100%;&nbsp; &nbsp; background-image: url(https://i.postimg.cc/bw0JjXgn/8-bit-game-wallpaper-42148.jpg);&nbsp; &nbsp; background-color: rgba(0, 0, 0, 0.4);&nbsp; &nbsp; background-repeat: no-repeat;&nbsp; &nbsp; background-position: center;&nbsp; &nbsp; border-radius: 20px 20px 0 0;&nbsp; &nbsp; filter: blur(2px);&nbsp; &nbsp; -webkit-filter: blur(2px);}#formtitle {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; font-size: 15px;&nbsp; &nbsp; text-transform: uppercase;&nbsp; &nbsp; font-family: 'Press Start 2P', cursive;&nbsp; &nbsp;&nbsp;}.center_form--elements input[type="text"] {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; width: 90%;&nbsp; &nbsp; height: 10%;&nbsp; &nbsp; margin-top: 2%;&nbsp; &nbsp; margin-left: 3%;&nbsp; &nbsp; display: block;&nbsp; &nbsp; border: none;&nbsp; &nbsp; outline: none;&nbsp; &nbsp; border-bottom: 1px solid #ddd;&nbsp; &nbsp; background: #f4f7f8;&nbsp; &nbsp; font-size: 18px;&nbsp; &nbsp; margin-right: auto;}.center_form--elements input[type="submit"] {&nbsp; &nbsp; position: relative;&nbsp; &nbsp; margin-top: 3%;&nbsp; &nbsp; margin-bottom: 3%;&nbsp; &nbsp; -moz-box-shadow: 1px 1px 15px 1px black;&nbsp; &nbsp; -webkit-box-shadow: 1px 1px 15px 1px black;&nbsp; &nbsp; box-shadow: 1px 1px 15px 1px black;&nbsp; &nbsp; background-color: #1A1D1E;&nbsp; &nbsp; border: 1px solid #1A1D1E;&nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; color: #FFFFFF;&nbsp; &nbsp; font-family: 'Open Sans Condensed', sans-serif;&nbsp; &nbsp; font-size: 14px;&nbsp; &nbsp; padding: 1% 5%;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; text-transform: uppercase;}<div class="center_form">&nbsp; &nbsp; &nbsp; &nbsp; <div class="center_form--header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 id="formtitle">Press start!</h2>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="center_form--elements">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input placeholder="Name" type="text">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input placeholder="Email" type="text">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="submit" value="START">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </div>