时间戳

首页 > 解决方案 > 如何使我的网页上的褪色背景大小相同？

javascript - 如何使我的网页上的褪色背景大小相同？

问题描述

我一直在尝试制作一个与滚动页面相关的褪色效果的简单网站：

$(window).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 1000) {
    $('#img2').fadeIn({});
  } else {
    $('#img2').fadeOut('fast')
  };

  if (y > 2000) {
    $('#img3').fadeIn({});
  } else {
    $('#img3').fadeOut('fast')
  };

  if (y > 3000) {
    $('#img4').fadeIn({});
  } else {
    $('#img4').fadeOut('fast')
  };

  if (y > 4000) {
    $('#img5').fadeIn({});
  } else {
    $('#img5').fadeOut('fast')
  };
});
body {
  background: black url('https://via.placeholder.com/500x300?text=img1');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

#img1,
#img2,
#img3,
#img4,
#img5 {
  margin: 0px !important;
  width: 100%;
  height: 100%;
  display: none;
  object-fit: fill;
  align-content: center !important;
  position: fixed;
  z-index: -1;
}
<html>

<head>
  <!--<link rel="stylesheet" type="text/css" href="style.css">-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <!--<script src="script.js"></script>-->
</head>

<body>
  <img id="img1" src="https://via.placeholder.com/500x300?text=img1">
  <img id="img2" src="https://via.placeholder.com/150x100?text=img2">
  <img id="img3" src="https://via.placeholder.com/150x100?text=img3">
  <img id="img4" src="https://via.placeholder.com/150x100?text=img4">
  <img id="img5" src="https://via.placeholder.com/150x100?text=img5">
</body>

</html>

一旦我滚动“进入”下一个背景，就会产生这个结果： 图片链接

如您所见，重叠的背景图像并没有完全覆盖第一个背景。我一直在阅读有关 CSS 标记和属性的信息，但无法解决。比我更有经验的人有什么建议吗？

标签： javascripthtmljquerycss

解决方案

使用以下 CSS 属性强制图像的大小覆盖整个视口：

top: 0;
bottom: 0;
left: 0;
right: 0;

如果要保持图像的比例，请设置object-fit为cover而不是fill.

您可能还想添加background-position: center到 CSS 背景中以使图像居中到视口。

请参阅此处的工作示例：https ://jsfiddle.net/8x6Ljc4e/

推荐阅读