css 我试图添加背景图像到我的同时滚动动画

我一直在尝试如何添加背景图片和滑动部分/文本。到目前为止，我只有图片附加到部分，但我认为我的方式写我的js是混乱的事情。我知道这是一个更好的做法，把图片作为背景在css，但我仍然是一个新手，只是想让我的着陆页整洁。
这是我的第一个项目。任何帮助都很感激。
（https://codepen.io/Robertthegreat12/pen/XWGbVbr）

section {
  display: grid;
  align-content: center;
  place-items: center;
  font-family: 'Times New Roman', Times, serif;
  min-height: 100vh;
  font-weight: 600;
  font-size: xx-large;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: #131316;
  color: #ffffff;
}

img {
  max-width: 500px;
  height: auto;
  max-width: 600px;
}

.btn-posnawr {
  color: #192022;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: auto;
  max-width: 250px;
  border-radius: 8px;
  margin: 1rem auto;
  font: normal 18px/60px 'proxima-nova', sans-serif;
  text-align: center;
  text-decoration: none;
  border: 2px solid #ffffff;
}

.btn-posnawr span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #00abec;
  -webkit-transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.btn-posnawr:hover {
  color: #eee;
}

.btn-posnawr:hover span {
  width: 225%;
  height: 562.5px;
}

.btn-posnawr:active {
  background-color: #00c4ad;
}

.box {
  opacity: 0;
  filter: blur(4px);
  transition: all 1s;
  transform: translateX(-100%);
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

#slide1 {
  background-image: url();
}

个字符
我试着把ID放在部分，并试图修改它，但它没有做任何事情。

要为每个部分添加背景图像，除了第一个部分，请使用nth-child选择器的background属性。这也避免了手动为每个部分添加ID和图像标记的需要。

main section:nth-child(n + 2) {
  background: no-repeat center url("https://images.unsplash.com/photo-1595147389795-37094173bfd8?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
}

字符串
要针对特定部分（如第3部分）：

main section:nth-child(3) {
// do something
}

型
下面是完整的代码：

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    } else {
      entry.target.classList.remove('show');
    }
  });
});

const hiddenElements = document.querySelectorAll('.box');
hiddenElements.forEach((el) => observer.observe(el));






(function() {
  const buttons = document.querySelectorAll(".btn-posnawr");

  buttons.forEach(button => {
    ["mouseenter", "mouseout"].forEach(evt => {
      button.addEventListener(evt, e => {
        let parentOffset = button.getBoundingClientRect(),
          relX = e.pageX - parentOffset.left,
          relY = e.pageY - parentOffset.top;

        const span = button.getElementsByTagName("span");

        span[0].style.top = relY + "px";
        span[0].style.left = relX + "px";
      });
    });
  });
})();

section {
  display: grid;
  align-content: center;
  place-items: center;
  font-family: "Times New Roman", Times, serif;
  min-height: 100vh;
  font-weight: 600;
  font-size: xx-large;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: #131316;
  color: #ffffff;
}

.btn-posnawr {
  color: #192022;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: auto;
  max-width: 250px;
  border-radius: 8px;
  margin: 1rem auto;
  font: normal 18px/60px "proxima-nova", sans-serif;
  text-align: center;
  text-decoration: none;
  border: 2px solid #ffffff;
}

.btn-posnawr span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #00abec;
  -webkit-transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.btn-posnawr:hover {
  color: #eee;
}

.btn-posnawr:hover span {
  width: 225%;
  height: 562.5px;
}

.btn-posnawr:active {
  background-color: #00c4ad;
}

.box {
  opacity: 0;
  filter: blur(4px);
  transition: all 1s;
  transform: translateX(-100%);
}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
}

/* add background images to all sections excluding first one */

main section:nth-child(n + 2) {
  background: no-repeat center url("https://images.unsplash.com/photo-1595147389795-37094173bfd8?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
}

/* add background image for 3rd section */

/* main section:nth-child(3) {
  background: no-repeat center url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQq70AvDs-OIZrlcU0kAqvObihT8VhvedCurSyXCDCakQ&s");
}

/* add background image for 4th section */

/* main section:nth-child(4) {
  background: no-repeat center
    url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQq70AvDs-OIZrlcU0kAqvObihT8VhvedCurSyXCDCakQ&s");
}
 */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <script defer src="javascript.js"></script>
  <title>Manga Central</title>
</head>

<body>
  <header>
    <div class="header1">
      <h1 id="main-text">Manga Central</h1>
    </div>
  </header>
  <main>
    <section>
      <h2>
        <p>Welcome to MANGA CENTRAL a place where you can enjoy your favorite mangas and </p>
      </h2>
    </section>

    <section class="box" id="slide1">
      <h2>Be Up To Date</h2>
      <p>with our page you will be able to stay up tp date with the latest manga news</p>
    </section>

    <section class="box" id="slide2">
      <h2>Read some of your favorites</h2>
      <p>although our stock is limited i assure you we have some of the best picks out there</p>
    </section>

    <section class="box" id="slide3">
      <h2>... And by that i mean most are my favorites ;) </h2>
    </section>

    <section class="box" id="slide4">
      <h2>Find your taste</h2>
      <p>from action to comedy,adventure,romance,horror,fantasy</p>
    </section>

    <section class="box" id="slide5">
      <h2>hey this is try out </h2>
      <p>this will be changed later afetr i put the images in </p>
    </section>

    <section class="box" id="slide6">
      <h2> For anime fans </h2>
      <p> this store is perfect for anime fans who want to jump into manga. Enjoy</p>
      <button class="btn-posnawr" href="#"><i class="fa-solid fa-kiwi-bird"></i>visit
        shop<span>yay</span></button>
    </section>

  </main>

</body>

</html>

的一种或多种
参考文件：

css 我试图添加背景图像到我的同时滚动动画

1条答案

相关问题

热门标签

最新问答