手机上的背景图片不正确

Question

我在mobile becomes very fuzzy上的背景图片。

但是在DevTools is Correct上。

好奇怪，如何解决？

.contact
  padding: 80px 30px
  color: #fff
  background: #151515 url('../src/assets/images/about.jpg') no-repeat fixed left bottom
  min-height: 100%
  background-size: cover
  position: relative

Answer 1

没有代码进行测试，我认为问题来自fixed属性：https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

如果将其删除，它将显示适合视口的图像并剪切无法显示的部分。由于图像要比视口大得多，因此在使用“固定”时，它将显示适合当前视口的那部分图像。

所以尝试：

background: #151515 url('../src/assets/images/about.jpg') no-repeat left bottom;

Answer 2

手机上的背景图片不正确。您使用的是背景尺寸的手机：

background-size: contain;