Question

嗯，这是我的第一个问题！

我在background-attachment: fixed;上发生<div>时遇到了问题，transform: translateZ(-1px) scale(2);也分配了此属性： - <!DOCTYPE html> <html> <head> <title>Parallax Scrolling Effect</title> <style> body { margin: 0px; padding: 0px; } div.parallax-page { position: relative; height: 100vh; width: 100vw; overflow-y: auto; overflow-x: hidden; perspective: 1px; -webkit-perspective-origin-x: 50%; perspective-origin-x: 50%; } div.parallax-page > div.group { position: relative; height: 100%; width: 100%; left: 0px; top: 0px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } div.parallax-page > div.group { margin-bottom: calc(100vh); } div.parallax-page > div.group:last-child { margin-bottom: -25vh; } div.parallax-page > div.group > div.background { transform: translateZ(-1px) scale(2); position: fixed; top: 0px; left: 0px; width: 100vw; height: 100%; /*background-attachment: fixed;*/ } div.parallax-page > div.group > div.slide { position: absolute; width: 50%; height: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(255,255,255,0.5); } div.parallax-page::-webkit-scrollbar { /*display: none;*/ } /* using formula -> scale = 1 + (translateZ * -1) / perspective */ </style> </head> <body> <div class="parallax-page"> <div class="group"> <div class="background" style="background-image: url('sample-wallpaper.svg');"></div> <div class="slide"> <h1 style="text-align: center;">A magical scroll!!</h1> </div> </div> <div class="group"> <div class="background" style="background-image: url('sample-wallpaper-2.svg');"></div> <div class="slide"> <h1 style="text-align: center;">A magical scroll!!</h1> </div> </div> <div class="group"> <div class="background" style="background-image: url('sample-wallpaper-3.svg');"></div> <div class="slide"> <h1 style="text-align: center;">A magical scroll!!</h1> </div> </div> <div class="group"> <div class="background" style="background-image: url('sample-wallpaper-5.svg');"></div> <div class="slide"> <h1 style="text-align: center;">A magical scroll!!</h1> </div> </div> </div> </body> </html>。实际上在第一张幻灯片上，背景图像正确渲染，但在其余幻灯片上，图像不可见。
此外，单击或拖动滚动条时，滚动条不起作用。

我在google上尝试过很多次，已经有两天了。最后我尝试了Stackoverflow，因为我无法得到我想要的具体答案。

如果我错过了一些链接，那么请帮帮忙原谅我。

这是我正在制作的页面 - http://mynk-9.github.io/test/

[edit] 现在，我还添加了代码。

<?php

 include ('connection.php');

   if( isset($_POST["add"]) ){
    function validateFormData($formData){
    $formData = trim(stripslashes(htmlspecialchars($formData)));
    return $formData;
}

$username = $email = $password = "";

if( !$_POST["username"]) {
    $nameError = "Please enter your name <br>";
} else{
    $username = validateFormData($_POST["username"]);
}
if (!$_POST["email"]) {
    $emailError = "Please enter your email <br>";
} else{
    $email = validateFormData($_POST["email"]);
}
if (!$_POST["password"]) {
    $passwordError = "Please enter your password <br>";
} else{
    $email = validateFormData($_POST["password"]);
}

if($username && $email && $password){
    $query = "INSERT INTO users (id, username, password, email, signup_date, biography) VALUES (NULL, '$username', '$password', '$email', CURRENT_TIMESTAMP, NULL)";

if(mysqli_query($conn, $query)){
    echo "New record in database!";
} else{
    echo "Error: ". $query . "<br>" . mysqli_error($conn);
}
}



}

  ?>


 <!DOCTYPE html>
 <html>
  <head>
<title>MySQL Insert</title>
<link rel="stylesheet"                 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 </head>
   <body>
  <div class="container">
 <h1>MySQL Insert</h1>
  <?php 


    ?>

    <p class="text-danger">* Required fields</p>
      <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"             method="post">

    <small class="text-danger">* <?php echo $nameError; ?></small>
    <input type="text" placeholder="Username" name="username"> <br> <br>

     <small class="text-danger">* <?php echo $emailError; ?></small>
   <input type="text" placeholder="Email" name="email"> <br> <br>

   <small class="text-danger">* <?php echo $passwordError; ?></small>
   <input type="password" placeholder="Password" name="password"> <br> <br>

   <input type="submit" name="add" value="Add Entry">
    </form>

     </div>


      <script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">          </script>
  </body>
   </html>

Answer 1

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-red.css">

<style>
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato", sans-serif;}
body, html {
    height: 100%;
    color: #777;
    line-height: 1.8;
}

/* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
    opacity: 0.7;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

}

/* First image  */
.bgimg-1 {
    background-image: url('https://pixabay.com/static/uploads/photo/2016/01/19/17/16/rainbow-background-1149610_960_720.jpg');
    min-height: 100%;
}

/* Second image  */
.bgimg-2 {
    background-image: url("https://i.ytimg.com/vi/4AA4qYGunr4/maxresdefault.jpg");
    min-height: 400px;
}


/* Adjust the position of the parallax image text */
.w3-display-middle {bottom: 45%;}

.w3-wide {letter-spacing: 10px;}

.w3-hover-opacity {cursor: pointer;}


</style>
<body>

<!-- Navbar (sit on top) -->
<div class="w3-top">
  <ul class="w3-navbar" id="myNavbar">
    <li><a href="#" class="w3-padding-large">HOME</a></li>
    <li class="w3-hide-small w3-right">
      <a href="#" class="w3-padding-large w3-hover-red"><i class="fa fa-search"></i></a>
    </li>
  </ul>
</div>

<!-- First Parallax Image with Text -->
<div class="bgimg-1 w3-opacity w3-display-container">
  <div class="w3-display-middle">
    <span class="w3-center w3-padding-xlarge w3-black w3-xlarge w3-wide w3-animate-opacity">MY <span class="w3-hide-small">WEBSITE</span> LOGO</span>
  </div>
</div>

<!-- Container (About Section) -->
<div class="w3-content w3-container w3-padding-64" id="about">
  <h3 class="w3-center">ABOUT ME</h3>
  <p class="w3-center"><em>I love photography</em></p>
  <p>We have created a fictional "personal" website/blog, and our fictional character is a hobby photographer. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
    qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    </div>



<!-- Second Parallax Image with Portfolio Text -->
<div class="bgimg-2 w3-display-container">
  <div class="w3-display-middle">
    <span class="w3-xxlarge w3-text-light-grey w3-wide">PORTFOLIO</span>
  </div>
</div>

<footer class="w3-container w3-theme-dark w3-padding-16">

  <p>Powered by <a href="#" target="_blank">csandreas1</a></p>
 
</footer>


</body>
</html>

视差滚动CSS

1 个答案: