媒体查询和背景图片

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个div

<div id="page">
</div>

使用以下css：

   #page {
    background: url('images/white-zigzag.png') repeat-x;
    }
    @media (max-width: 600px) {
  #page {      
  background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

我注意到，当我调整浏览器的大小时，会看到“移动”背景（很好），但是如果回过头来使浏览器变大，则以前的“大”背景并不会总是重新出现。

这是一个间歇性问题，但经常发生，以至于我认为应该解决。

是否有任何方法可以解决此“背景图像不出现”问题或调整背景图像的大小，以便媒体查询“收缩”背景图像以适应新的大小？据我所知，没有（广泛）的方法来更改背景图像的大小…

回答：

根据 ：

如果 希望将图像的桌面版本下载到桌面上…

并且 要在移动设备上下载的移动图片-

您需要使用min-width声明为桌面图像指定最小浏览器宽度。

一个max-width用于移动图片。

因此您的代码将是：

@media (min-width: 601px) {
  #page {
    background: url('images/white-zigzag.png') repeat-x;
  }
}
@media (max-width: 600px) {
  #page {      
     background: url('images/white-zigzag-mobile.png') repeat-x;
  }
}

以上是 媒体查询和背景图片 的全部内容， 来源链接： utcz.com/qa/426173.html

回到顶部