色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

我如何使用CSS和HTML讓我的背景圖片淡入和網頁的其他部分一樣的過渡？

CSS
錢淋西2年前8瀏覽0評論

我有下一個代碼來做一個淡入淡出過渡，但是我的背景圖片先加載，沒有淡入淡出？

body {
    opacity: 0;
    transition: opacity 5s;
   }

然后:

<body onload="document.body.style.opacity='1'">

并且背景圖像比rest先加載。

我希望背景圖片加載的時間和其他圖片一樣。

document.addEventListener('DOMContentLoaded', function() {
  document.body.classList.add('loaded');
});

body {
  opacity: 0;
  transition: opacity 5s;
}

.background-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('path/to/your-image.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 5s;
}

body.loaded {
  opacity: 1;
}

body.loaded .background-image {
  opacity: 1;
}

<body>
  <div class="background-image"></div>
  <!-- Rest of your webpage content -->
</body>

離開& ltbody & gt正常(不需要不透明屬性)。為不同的不透明度值定義@關鍵幀。將position: fixed/z-index: 1添加到& ltbody & gt(在下面的例子中，它是一個& ltsection & gt).將動畫屬性分配給所述元素。

細節在示例中進行了注釋

/**
 * Define a simple set of keyframes named "fade"
 * from {a state of visible} to {a hidden state}
 */
@keyframes fade {
  from {
    opacity: 1.0;
  }
  to {
    opacity: 0.0;
  }
}

body {
  min-height: 100vh;
  margin: 0 /* Allows it to be covered edge to edge. */;
  background: url(https://i.ibb.co/pKPKR1v/wall0.jpg) no-repeat center; 
  background-size: cover;
}

section {
  position: fixed /* Place fixed within the viewport. */;
  z-index: 1 /* Place "over" <body>. */;
  width: 100vw;
  height: 100vh;
  background: black;
  /**
   * Reference @keyframes "fade"
   * Duration lasts for 5 seconds
   * Forwards fill-mode ensures that animation stays at the
   * last keyframe.
   */
  animation: fade 5s forwards;
}

<section></section>