文本框和标签不会被放置在图像上 [英] The textfields and label are not getting placed over the image
本文介绍了文本框和标签不会被放置在图像上的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
有两个文件，一个是html和css
第一个页面包含打开一个模式的按钮。
我想在模态中放置一个背景图片，但是我的内容是在放置背景图像时放下。
我想将所有内容放置在模态背景图像上方。
您能否看到它？
< style> ; / *默认隐藏* / .ab {text-align：center; } h2 {text-align：center; padding-top：200px; } button {width：300px; height：40px; } / *设置登录模式* / .my_modal {display：none; / *默认隐藏* / position：fixed; / *保持原状* / z-index：1; / *坐在上面* / padding-top：100px; / *框的位置* /左：0; top：0;宽度：100％; / *全宽* /高度：100％; / *全高* /溢出：自动; / *如果需要可以滚动* / background-color：rgb（0,0,0）; / *备用颜色* / background-color：rgba（0,0,0,0.4）; / *黑色w /不透明度* /} .modal-animated {height：100％;宽度：50％; background-color：#fefefe; padding：20px; border：1px solid＃888;保证金：5％汽车15％汽车; / * 5％从顶部开始，15％从底部开始并居中* /} .backg {< image} / *登录 - 关闭按钮* / .close {position：absolute; right：25px; top：0;颜色：水色; font-size：35px; font-weight：bold; } .close：hover，.close：focus {color：red;光标：指针; } / *设置登录图像背景& resizing vatar * / .img-container {background-image：url（http://artatm.com/wp-content/uploads/2010/04/wallpaper_182372.jpg）; background-size：cover; height：300px; text-align：center; margin：24px 0 12px 0;位置：相对; } img.avatar {width：40％;边界半径：60％; } input [type =text]，input [type =password] {width：100％;填充：12px 20px; margin：8px 0;显示：inline-block; border：1px solid #ccc;盒子尺寸：边框; } .container {padding：16px; }按钮[type =submit] {width：50vw;身高：3vw;位置：绝对;左：49vw;顶部：110vh;变换：翻译（-50％，-80％）; font-family：'Varela Round'，sans-serif; font-size：2vw; letter-spacing：0.1em;颜色：＃e8e8e8; border：none; border-radius：10px;概要：无;背景：线性梯度（45度，＃4CAF50，蓝绿色，＃4CAF50）;背景大小：400％400％; box-shadow：1vw 1vw 0 green;光标：指针;过渡：全部0.3s缓解; }按钮[type =submit]：悬停{动画：渐变10s缓解无限; font-size：2.05vw; box-shadow：0.2vw 0.2vw 0 lightcoral; } @keyframes渐变{50％{background-position：100％0; < html>< / / c $ c>
您可以运行在这里输出看错误
解决方案
我希望它能帮助你：
< style> / *默认隐藏* / .ab {text-align：center; } h2 {text-align：center; padding-top：200px; } button {width：300px; height：40px; } / *设置登录模式* / .my_modal {display：none; / *默认隐藏* / position：fixed; / *保持原状* / z-index：1; / *坐在上面* / padding-top：100px; / *框的位置* /左：0; top：0;宽度：100％; / *全宽* /高度：100％; / *全高* /溢出：自动; / *如果需要可以滚动* / background-color：rgb（0,0,0）; / *备用颜色* / background-color：rgba（0,0,0,0.4）; / *黑色w /不透明* /} .modal-animated {background-image：url（http://artatm.com/wp-content/uploads/2010/04/wallpaper_182372.jpg）;身高：100％;宽度：50％; background-color：#fefefe; padding：20px; border：1px solid＃888;保证金：5％汽车15％汽车; / * 5％从顶部开始，15％从底部开始并居中* /} .backg {< image} / *登录 - 关闭按钮* / .close {position：absolute; right：25px; top：0;颜色：水色; font-size：35px; font-weight：bold; } .close：hover，.close：focus {color：red;光标：指针; } / *设置登录图像背景& resizing vatar * / .img-container {background-size：cover; height：300px; text-align：center; margin：24px 0 12px 0;位置：相对; } img.avatar {width：40％;边界半径：60％; } input [type =text]，input [type =password] {width：100％;填充：12px 20px; margin：8px 0;显示：inline-block; border：1px solid #ccc;盒子尺寸：边框; } input [type =text] {display：block; } .container {padding：16px; }按钮[type =submit] {width：50vw;身高：3vw;显示：块; font-family：'Varela Round'，sans-serif; font-size：2vw; letter-spacing：0.1em;颜色：＃e8e8e8; border：none; border-radius：10px;概要：无;背景：线性梯度（45度，＃4CAF50，蓝绿色，＃4CAF50）;背景大小：400％400％; box-shadow：1vw 1vw 0 green;光标：指针;过渡：全部0.3s缓解; margin-bottom：20px; }按钮[type =submit]：悬停{动画：渐变10s缓解无限; font-size：2.05vw; box-shadow：0.2vw 0.2vw 0 lightcoral; } @keyframes渐变{50％{background-position：100％0; < html>< / / c $ c>
There is two file one is html and css
The first page contain the button to open a modal.
I want to place a background image in modal but my contents are getting down while placing the back ground image.
I want to place my all contents above the modal back ground image.
Can u please see it
<style>
/* Hidden by default */
.ab{
text-align: center;
}
h2{
text-align: center;
padding-top: 200px;
}
button{
width: 300px;
height: 40px;
}
/* Seting The Log-in Modal */
.my_modal{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-animated{
height: 100%;
width: 50%;
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
margin:5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
}
.backg{
<image
}
/* Login- close button */
.close{
position: absolute;
right: 25px;
top: 0;
color: aqua;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus{
color: red;
cursor: pointer;
}
/* setting login image background & resizing vatar */
.img-container{
background-image: url(http://artatm.com/wp-content/uploads/2010/04/wallpaper_182372.jpg);
background-size: cover;
height: 300px;
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar{
width: 40%;
border-radius: 60%;
}
input[type="text"], input[type="password"]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
.container{
padding: 16px;
}
button[type="submit"]{
width: 50vw;
height: 3vw;
position: absolute;
left: 49vw;
top: 110vh;
transform: translate(-50%, -80%);
font-family: 'Varela Round', sans-serif;
font-size: 2vw;
letter-spacing: 0.1em;
color: #e8e8e8;
border: none;
border-radius: 10px;
outline: none;
background: linear-gradient(45deg, #4CAF50, teal, #4CAF50);
background-size: 400% 400%;
box-shadow: 1vw 1vw 0 green;
cursor: pointer;
transition: all 0.3s ease;
}
button[type="submit"]:hover {
animation: gradient 10s ease infinite;
font-size: 2.05vw;
box-shadow: 0.2vw 0.2vw 0 lightcoral;
}
@keyframes gradient {
50% {
background-position: 100% 0;
}
}
</style>
<html>
<body>
<div class="ab">
<h2>Hello!!!</h2>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Register</button>
</div>
<div id= "id01" class="my_modal">
<form class="modal-animated animate" action="actionpahe.php">
<div class="img-container">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="avatar-05.png" alt="Avatar" class="avatar">
</div>
<div class="contents">
<label><b>Username</b></label>
<input type= "text" placeholder="Enter User_name" name= "uname" required>
<label><b>Password</b></label>
<input type= "password" placeholder="Enter Pass_code" name="pwd" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked">Remember Me
</div>
</form>
</div>
</body>
</html>
You Can run the output here to see the error
解决方案
I hope it's will help you :
<style>
/* Hidden by default */
.ab{
text-align: center;
}
h2{
text-align: center;
padding-top: 200px;
}
button{
width: 300px;
height: 40px;
}
/* Seting The Log-in Modal */
.my_modal{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-animated{
background-image: url(http://artatm.com/wp-content/uploads/2010/04/wallpaper_182372.jpg);
height: 100%;
width: 50%;
background-color: #fefefe;
padding: 20px;
border: 1px solid #888;
margin:5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
}
.backg{
<image
}
/* Login- close button */
.close{
position: absolute;
right: 25px;
top: 0;
color: aqua;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus{
color: red;
cursor: pointer;
}
/* setting login image background & resizing vatar */
.img-container{
background-size: cover;
height: 300px;
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar{
width: 40%;
border-radius: 60%;
}
input[type="text"], input[type="password"]{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type="text"]{
display: block;
}
.container{
padding: 16px;
}
button[type="submit"]{
width: 50vw;
height: 3vw;
display: block;
font-family: 'Varela Round', sans-serif;
font-size: 2vw;
letter-spacing: 0.1em;
color: #e8e8e8;
border: none;
border-radius: 10px;
outline: none;
background: linear-gradient(45deg, #4CAF50, teal, #4CAF50);
background-size: 400% 400%;
box-shadow: 1vw 1vw 0 green;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 20px;
}
button[type="submit"]:hover {
animation: gradient 10s ease infinite;
font-size: 2.05vw;
box-shadow: 0.2vw 0.2vw 0 lightcoral;
}
@keyframes gradient {
50% {
background-position: 100% 0;
}
}
</style>
<html>
<body>
<div class="ab">
<h2>Hello!!!</h2>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Register</button>
</div>
<div id= "id01" class="my_modal">
<form class="modal-animated animate" action="actionpahe.php">
<div class="img-container">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="avatar-05.png" alt="Avatar" class="avatar">
<div class="contents">
<label><b>Username</b></label>
<input type= "text" placeholder="Enter User_name" name= "uname" required>
<label><b>Password</b></label>
<input type= "password" placeholder="Enter Pass_code" name="pwd" required>
<button type="submit">Login</button>
<input type="checkbox" checked="checked">Remember Me
</div>
</div>
</form>
</div>
</body>
</html>
这篇关于文本框和标签不会被放置在图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
