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

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 {

    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;

    text-align: center;

    color: white;

    padding-bottom: 2%;

    padding-top: 2%;

    border-radius: 20px 20px 0 0;

}

.center_form--header:before{

    content:'';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

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

    background-repeat: no-repeat;

    background-position: center;

    border-radius: 20px 20px 0 0;

    filter: blur(2px);

    -webkit-filter: blur(2px);

}

#formtitle {

    position: relative;

    display: inline-block;

    width: 100%;

    margin: 0;

    font-size: 15px;

    text-transform: uppercase;

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

    

}

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

}

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

    position: relative;

    margin-top: 3%;

    margin-bottom: 3%;

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

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

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

    background-color: #1A1D1E;

    border: 1px solid #1A1D1E;

    display: inline-block;

    cursor: pointer;

    color: #FFFFFF;

    font-family: 'Open Sans Condensed', sans-serif;

    font-size: 14px;

    padding: 1% 5%;

    text-decoration: none;

    text-transform: uppercase;

}

<div class="center_form">

        <div class="center_form--header">

            <h2 id="formtitle">Press start!</h2>

        </div>

        <form>

            <div class="center_form--elements">

                <input placeholder="Name" type="text">

                <input placeholder="Email" type="text">

                <input type="submit" value="START">

            </div>

        </form>

    </div>