手机上的Css - image中断

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;
    }
  }
}