Question

我正在尝试在我的站点上使用视差图像，我喜欢图像的位置和位置，但是图像非常模糊，我无法弄清楚css使其不那么模糊。这就是我的

.Parallax {
  background-image: url('https://picsum.photos/426/410');
  height: 300px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<div class="Parallax"></div>

Answer 1

使用background-size: cover进行视差处理时，除非您打算在很小的div中使用该图像，否则您需要确保其图像的高分辨率，而基于您正在使用的图像，div应该很小{ 1}}

width: 426px

`

.Parallax {
  background-image: url('https://wallpaper.wiki/wp-content/uploads/2017/05/Great-barrier-reef-backgrounds-travel-gallery.jpg');
  height: 300px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

以下是您的代码示例，但图像不同：https://jsfiddle.net/umq9cphf/

视差图像非常模糊

1 个答案: