我一直在嘗試使用 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;}
1 回答
寶慕林4294392
TA貢獻2021條經驗 獲得超8個贊
您需要將背景移動到標題而不是裁剪它。除了標題背景之外，您還可以使用 :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>
- 1 回答
- 0 關注
- 148 瀏覽
添加回答
舉報
0/150
提交
取消