html - Why I can't see this image when I set position to relative?
问题描述
I've been playing around with z-index to create kind of a crystal effect as you can see, thing is that, If I want the background of the header to be visible I need to set his position to absolute but I don't know why. That background image is relative to the .center_form--header class and since I used z-index it should get all the back space to display doesn't it?
Anyone knows what's happening or can tell me how is this supposed to work?
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;
}
.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">
<div id="formtitlebg"></div>
<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>
解决方案
您需要将背景移动到标题而不是裁剪它。除了标题背景,您还可以使用 :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>
推荐阅读
- python - 使用小部件参数调用修饰的交互函数
- validation - Go gin 验证输入以排除子字符串
- vb.net - 在嵌套的 sortedlist vb.net 中分组
- python - 无法安装 'web3[tester]' (Python)。命令行警告 - D9002
- python - Python 不能使用从另一个 python 文件导入的类的构造函数
- javascript - 阅读更多选项 react-native-gifted-chat
- java - 从输入的一维数组返回一个二维数组
- java - Kubernetes 上的 Spring Boot 不会在 java.lang.OutOfMemoryError: Java heap space 上重新启动
- php - 为什么 PHP 在相对相似的环境中执行不同
- python-3.x - 如何让子进程显示正在机器上执行的命令