CSS-手机上的图片已损坏

Question

我正在创建自己的投资组合网站，并且在移动设备上背景图片的行为异常。当我发现页面时，有时背景图片效果很好，有时看起来真的很糟糕。

我一直问过一次，但是这种方法不能解决我的问题。

Css - how to stop image scalling with size cover?

网站：https://jozefrzadkosz-portfolio.pl

台式机上的CSS类：

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('~/header_train.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    filter: brightness(30%) sepia(0.3);
    -webkit-filter: brightness(30%) sepia(0.3);
  }

和移动设备上：

@media only screen and (max-width: 768px) {
  header {
    .background-image {
      background-attachment: initial;
    }
  }
}

在手机上拍摄的背景图片：

Answer 1

图像正在重复，因此请将其添加到您的CSS：background-repeat：no-repeat;

Answer 2

只需将background-repeat: no-repeat;添加到您的班级中，如下所示：

.background-image {
    position: absolute;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('~/header_train.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    filter: brightness(30%) sepia(0.3);
    -webkit-filter: brightness(30%) sepia(0.3);
  }

我将其添加到您的桌面类中是因为这种方式还必须将其应用于“移动”视图，但是，如果您仅在移动设备上遇到此问题，请尝试将其添加到移动类中。 （见下文）

@media only screen and (max-width: 768px) {
  header {
    .background-image {
      background-attachment: initial;
      background-repeat: no-repeat;
    }
  }
}