Css

Question

我正在创建自己的投资组合网站，但在移动设备上我的背景图片表现得很奇怪。当我发现页面时，有时 background-image 工作得很好，有时看起来真的很糟糕。

我已经问过一次了，但这种方法并没有解决我的问题。

CSS Class 在桌面上：

.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; 添加到您的 class 中，如下所示：

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

我将它添加到您的桌面 class 因为这样它也必须适用于 "mobile" 视图，但是如果您只在移动设备上遇到此问题，请尝试将它添加到移动设备 class 代替。（见下文）

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

Css - 移动设备上的图像被破坏

Css - image on mobile is disrupted

html

background-image

media-queries