如何删除媒体中的背景图像主体

Question

所以，我的网站背景中有一张图片。当我的网站在媒体屏幕中打开时，我希望图像在媒体屏幕中消失。 我尝试这样做：

body {
  font-family: "Roboto", sans-serif;
  color: #000000;
  background-color: #f2f2f2;
  background-image: url("https://picsum.photos/200/300?grayscale");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 110%;
  background-attachment: fixed;
}

@media only screen and (max-width: 200px) {
  body {
    background-color: lightblue;
    background-image: none;
  }
}

但它不起作用。 网站是：www.good Plastic.pt

Answer 1

您的 CSS 代码看起来基本正确。但是，可能存在一些问题导致背景图像在较小的屏幕上不会消失：

媒体查询条件：条件 max-width: 200px 对于典型的屏幕尺寸可能太窄。它仅适用于视口宽度为 200 像素或更小的情况。考虑使用更宽的宽度，例如 max-width: 600px，以更有效地定位较小的屏幕。

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
    background-image: none;
  }
}

Answer 2

看起来在媒体查询中使用 max-width: 200px 可能存在误解。通常， max-width: 200px 适用于宽度小于 200 像素的设备或屏幕，这对于大多数屏幕来说非常窄且不常见。

如果您尝试针对较小的屏幕，您可以考虑使用更高的 max-width 值，例如平板电脑的 max-width: 768px 或手机的 max-width: 480px， 具体取决于您的设计和目标设备。

这是 CSS 的更新版本，具有更常见的最大宽度值，它对我有用：

body {
  font-family: "Roboto", sans-serif;
  color: #000000;
  background-color: #f2f2f2;
  background-image: url("../images/Logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 110%;
  background-attachment: fixed;
}

@media only screen and (max-width: 768px) {
  body {
    background-color: lightblue;
    background-image: none;
  }
}