2017-09-01 102 views
1

有两个文件之一是html和css
第一页包含打开模式的按钮。
我想放置一个背景图像模态,但我的内容正在放下背景图像。
我想将我的所有内容放在模态背景图像的上方。
u能请看看textfields和标签没有越过图像

<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">&times;</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>

你可以在这里运行输出看到错误

回答

0

我希望这会帮助你:

<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">&times;</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>

0

您可以使用CSS position: relative;轻松移动REALLY。你的CSS代码中你的风格的投入应该是这样的,

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

 
      position: relative; 
 
      top: -210px; 
 
     } 
 

 
     label{ 
 
      position: relative; 
 
      top: -215px; 
 
      color: white; 
 
      font-family: Arial; 
 
     } 
 

 
     .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">&times;</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>

我希望这个作品。如果您运行该代码段,则会看到图像和标签位于图像上方。祝你的项目好运。

+0

在这里,我给标签,文本和密码输入放置一个“相对”位置。 CSS中的相对位置可以使用'top:;','bottom:;','left:;'和'right:''parametres'轻松地移动物体。 – Oqhax

+0

相对意味着您正在传递的'px'会将您的对象从其所在的容器移开,而不是从页面的边界移开。 – Oqhax

0
<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 */ 
    #id01{ 
    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; 
    width:900px; 
    position: absolute; 
    } 
    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">&times;</span> 
      </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> 
+0

尽管此代码片段可能会解决问题,但[包括解释](// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers)确实有助于提高帖子的质量。请记住,您将来会为读者回答问题,而这些人可能不知道您的代码建议的原因。 –