Html 如何阻止视差叠加干扰窗体和链接字段？_Html_Css_Parallax

Html 如何阻止视差叠加干扰窗体和链接字段？

html css

Html 如何阻止视差叠加干扰窗体和链接字段？,html,css,parallax,Html,Css,Parallax,我已经在PHP站点的索引页面中实现了简单的视差图像。由于某种原因，由于我实现的视差报头，登录表单行为不正常。在这张照片上有一个由一个div放置的图像覆盖，我将其命名为logo。我可以肯定这是罪魁祸首，因为当我把它注释掉时，表单字段和链接就起作用了。该网站位于。请确保表单字段不起作用。我已经为我的3张图片和logo类添加了css。任何帮助都将不胜感激 <!DOCTYPE html> <html> <head> <title>FORUM</tit

我已经在PHP站点的索引页面中实现了简单的视差图像。由于某种原因，由于我实现的视差报头，登录表单行为不正常。在这张照片上有一个由一个div放置的图像覆盖，我将其命名为logo。我可以肯定这是罪魁祸首，因为当我把它注释掉时，表单字段和链接就起作用了。该网站位于。请确保表单字段不起作用。我已经为我的3张图片和logo类添加了css。任何帮助都将不胜感激

<!DOCTYPE html>
<html>
<head>
<title>FORUM</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body style="background-color: maroon";>
<div style= "background-color: gold; border-style: solid;">

//This "logo" div stops my form and link fields from working  
<div class="pimg1">
<div class="logo"></div>
</div>

<div style="background-color: gold; border-style: solid;">
<h1>Matt Macy's Forum</h1>

<?php
session_start();
if (!isset($_SESSION['uid'])){
echo "<form action='login_parse.php' method='post'>
Username: <input type='text' name='username' />&nbsp;
Password: <input type='password' name='password' />&nbsp;
<input type='submit' name='submit' value='Log In'/></form>";
echo "You can joing this site with Admin approval <a 
href='register.php' class='Links'>Register</a>";
}else {
    echo "You are logged in as ". $_SESSION['username']. "with a level 
of " . $_SESSION['level']."<a href='logout_parse.php' 
class='Links'>Logout</a>";
}   if (isset($_SESSION['level']) && ($_SESSION['level'] == 'Admin')){
        echo "<a href='authenticate.php' 
class='authenticate'>Authenticate</a>";
        echo "<a href='postAudiowithPayPal.php' 
class='postAudiowithPayPal'>Post audio with PayPal</a>";

}
echo"</div><br>";
//This is my second parallax image that doesn't cause difficulty
echo"<div class='pimg2'><span class='border'></span></div>";

问题是你的标志高度。尝试使用与正在用作背景的图像相同的大小。您可以在该图像中看到，将鼠标放在最左侧的输入上并向右移动，logo div正在阻止下面的元素。另一个选项是设置指针事件：无；在.logo元素上，但在本例中有点粗糙

我更改了高度以匹配图像：高度：1667px；我仍然在这些领域遇到问题。那个标志图像的高度是173像素，而不是1667像素。你的身高：100%；设置为。徽标-将其更改为高度：173px；哦，你是指标志的像素。我以为你是说背景，谢谢

.pimg1{
background-image:url('pimg1.jpg');
min-height:100%;
height:600px;
}

.pimg2{
background-image:url('pimg2.jpg');
min-height:100%;
height:500px;
}
.pimg3{
background-image:url('pimg3.jpg');
min-height:100%;
height:500px;
}

@media(max-width:568px){
.pimg1, .pimg2, .pimg3{
    background-attachment: scroll;
}
}

.logo{
height: 100%;
width: 100%;
background-image:url('SpiritualAutomaton2.png');
position: center;
background-repeat: no-repeat;
position: absolute;
top:50%;
margin-top:-50px;
margin-left:130px;


}
.Links{
      ?
}