Question

我有一个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;
  }
}

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

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

有没有办法解决这个“背景图像不出现”问题或调整背景图片大小的方法，以便媒体查询“缩小”背景图像以适应新的尺寸？据我所知，没有（广泛的）方法来改变背景图像的大小...

Answer 1

根据this test：

如果您希望仅将图片的桌面版本下载到桌面上...

和仅要在移动设备上下载的移动图片 -

您需要使用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;
  }
}

Answer 2

您提供的代码是一个小小的错误，这可能是您目前开始的好地方

#page {
background: url('images/white-zigzag.png') repeat-x;
}

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

媒体查询部分尚未完成。您仍然需要提供在查询之外使用的CSS选择器：

#page {
background: url('images/white-zigzag.png') repeat-x;
}

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

从那开始，让我知道是否可以解决问题。

Answer 3

请使用

`@media screen and (min-width: 320px) and (max-width:580px) {
 #page{
 background: url('images/white-zigzag.png') repeat-x;}}`

媒体查询和背景图像

3 个答案: