Html 手机上的Css图像被破坏

我正在创建自己的公文包网站，在手机上，我的背景图片表现得很奇怪。当我发现页面时，有时背景图像效果很好，有时看起来很糟糕

我曾经问过一次，但这种方法并不能解决我的问题

网站：

桌面上的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;
    }
  }
}

手机拍摄的背景图片：

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

---

图像本身正在重复，因此将其添加到css中：背景重复：无重复

图像本身在重复，因此将其添加到css:background repeat:no repeat

只需添加

背景重复：无重复编码到您的类中，如下所示：

。背景图像{
位置：绝对位置；
背景重复：无重复；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景图片：url（“~/header_train.jpg”）；
背景附件：固定；
背景尺寸：封面；
背景位置：中心；
滤光片：亮度（30%）深褐色（0.3）；
-webkit过滤器：亮度（30%）深褐色（0.3）；
}

我将它添加到桌面类中，因为这样它也必须应用于“mobile”视图，但是如果您仅在mobile上遇到此问题，请尝试将其添加到mobile类中。（见下文）

@仅媒体屏幕和（最大宽度：768px）{
标题{
.背景图像{
背景附件：首字母；
背景重复：无重复；
}
}
}
只需添加
背景重复：无重复编码到您的类中，如下所示：

。背景图像{
位置：绝对位置；
背景重复：无重复；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景图片：url（“~/header_train.jpg”）；
背景附件：固定；
背景尺寸：封面；
背景位置：中心；
滤光片：亮度（30%）深褐色（0.3）；
-webkit过滤器：亮度（30%）深褐色（0.3）；
}

我将它添加到桌面类中，因为这样它也必须应用于“mobile”视图，但是如果您仅在mobile上遇到此问题，请尝试将其添加到mobile类中。（见下文）

@仅媒体屏幕和（最大宽度：768px）{
标题{
.背景图像{
背景附件：首字母；
背景重复：无重复；
}
}
}
您是否尝试添加背景重复：无重复；我需要测试一段时间，但现在它解决了这个问题。啊，它是有效的，@教父，你可以添加这个作为答案。非常感谢！很高兴这帮了你我添加了答案，你是否尝试添加背景重复：无重复；我需要测试一段时间，但现在它解决了这个问题。啊，它是有效的，@教父，你可以添加这个作为答案。非常感谢！很高兴这对你有帮助我补充了答案