javascript - 当我在 html 和 css 中向下滚动时，如何使图像位于菜单栏后面？

问题描述

当我在 html 和 css 中向下滚动时，如何使图像位于菜单栏后面？我已经尝试了一些东西，但它对我没有帮助，请尽可能帮助我，因为这对我来说真的很重要，请在此处输入图像描述

* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  background-color: #fff3cc;
}

.menu {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  top: 0;
  position: fixed;
}

.menu ul {
  display: inline-flex;
  float: right;
  margin: 30px;
  font-family: "FuturaMedium", Futura, "Century Gothic", sans-serif;
}

.menu ul li {
  list-style: none;
  margin: 0 20px;
  color: #fff;
  cursor: pointer;
}

h3 {
  float: left;
  margin-top: 30px;
  margin-left: 30px;
  font-family: "FuturaMedium", Futura, "Century Gothic", sans-serif;
  color: #ff8c8c;
}

.active {
  color: #a5e5ff !important;
}

.slidershow {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

.middle {
  position: absolute;
  top: 50%;
  left: 25%;
  transform: translate(-50%, -50%);
}

.navigation {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.bar {
  width: 50px;
  height: 10px;
  border: 2px solid #fff;
  margin: 6px;
  cursor: pointer;
}

.bar:hover {
  background: #fff;
}

input[name="r"] {
  position: absolute;
  visibility: hidden;
}

.slides {
  width: 500%;
  height: 100%;
  display: flex;
}

.slide {
  width: 20%;
  transition: 0.6s;
}

.slide img {
  width: 100%;
  height: 100%;
}

#r1:checked~.s1 {
  margin-left: 0;
}

#r2:checked~.s1 {
  margin-left: -20%;
}

#r3:checked~.s1 {
  margin-left: -40%;
}

.about {
  margin-top: 100px;
  float: right;
  width: 50%;
  padding-left: 150px;
  margin-right: 40px;
}

h1 {
  font-family: "Lucida Grande", sans-serif;
  font-size: 30pt;
  line-height: 60px;
}

h2 {
  font-family: "Lucida Grande", sans-serif;
  line-height: 50px;
}

p {
  font-family: Optima, sans-serif;
  font-size: 13pt;
  line-height: 30px;
}

.shop-btn {
  margin-left: 250px;
  margin-top: 680px;
  display: inline-flex;
}

.shop-btn-inner {
  height: 50px;
  width: 50px;
  border: 2px solid transparent;
  border-radius: 50px;
  background-image: linear-gradient(#42455a, #42455a), radial-gradient(circle at top left, #fd00da, #19d7f8);
  background-origin: border-box;
  background-clip: content-box, border-box;
  text-align: center;
}

.shop-btn-inner .fa {
  padding: 18px 0;
  font-size: 13px;
  cursor: pointer;
}

.small {
  margin: auto 20px;
  cursor: pointer;
  font-size: 12px;
  color: #96ff8c;
  letter-spacing: 3px;
}

<html>

<head>
  <title>Vista Digital Cameras</title>
  <link rel="stylesheet" href="home.css" type="text/css">
</head>

<body>
  <div class="container">
    <div class="menu">
      <h3>VISTA DIGITAL</h3>
      <ul>
        <li class="active">HOME</li>
        <li>CAMERAS</li>
        <li>SERVICES</li>
        <li>NEWS</li>
        <li>CONTACT</li>
      </ul>
    </div>
    <div class="slidershow middle">
      <div class="slides">
        <input type="radio" name="r" id="r1" checked>
        <input type="radio" name="r" id="r2">
        <input type="radio" name="r" id="r3">
        <div class="slide s1">
          <img src="images/x-a5%20brown.jpg" alt="">
        </div>
        <div class="slide">
          <img src="images/x-a5%20black.jpg" alt="">
        </div>
        <div class="slide">
          <img src="images/x-a5%20turquoise.jpg" alt="">
        </div>
      </div>
      <div class="navigation">
        <label for="r1" class="bar"></label>
        <label for="r2" class="bar"></label>
        <label for="r3" class="bar"></label>
      </div>
    </div>

    <div class="about">
      <h1>About Us</h1>
      <p>Vista Digital is a company engaged in the field of photography founded in 2000. In accordance with our vision and mission, we are committed to help develop the world of photography in Indonesia with our concept, the 3S, namely: Sales, Services,
        and School.</p>
      <h2>Sales</h2>
      <p>We make every effort to meet the needs of photographers by providing all photographic equipments, ranging from core equipments to supporting accessories for your photography needs, from all brands both original and third-party. Our knowledgeable
        staff will help you with product knowledge and technical and maintenance matters in the use of your photographic equipments.</p>
      <h2>Services</h2>
      <p>We also provide repairment/maintenance services for your photography products for all brands, supported by highly experienced equipments and technical personnel. </p>
      <h2>School</h2>
      <p>Not only do we focus on Sales and Services, we also provide solutions for those of you who want to explore the field of photograph quickly and effectively. We provide adequate facilities, namely comfortable classrooms, studios, materials, and models,
        as well as tutors who are certainly very competent in the field of photography.</p>

      <p>"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." "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." "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."</p>
    </div>
    <div class="shop-btn">
      <div class="shop-btn-inner"><i class="fa fa-play"></i>
      </div>
      <small style="margin-top: 20px; margin-left: 10px; color: #96ff8c" ;><b>SHOP NOW</b></small>
    </div>
  </div>
</body>

</html>

我什么都试过了

当我在 html 和 css 中向下滚动时，如何使图像位于菜单栏后面？

标签： javascriptjqueryhtmlcss

javascript - 当我在 html 和 css 中向下滚动时，如何使图像位于菜单栏后面？

问题描述

解决方案

推荐阅读