css - pseduo-backround image::after in CSS for full HTML body 向下滚动时不会重复

Question

我的问题在标题中。我知道这可能很愚蠢，但我会非常感谢任何帮助。我有这个 CSS：

body::after {
  background: url("../img/IMAGE.jpg");
  content: "";
  opacity: 0.1;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

如果我向下滚动 HTML 页面，图像只会在屏幕大小中重复并且不会显示。我能做些什么？非常感谢！

标签： css

Answer 1

尝试使用 bottom: -100% （或需要但为负的百分比，例如 -200% 等）和 height: auto:

body::after {
   bottom: -100%;
   height: auto;
}