Question

我有一个带有简单背景图像的div。我需要更改图像及其显示方式以获得响应性但是当我调整浏览器大小时，我看到一些奇怪的行为发生，封面图像最初没有显示或显示为碎片当我第二次调整大小时，即使只有一个像素变化，它也会开始显示。刷新任何大小的浏览器都可以正常工作。知道为什么会这样，以及如何解决它？

.mydiv {
  background: url(../img/background1.jpg) no-repeat;
  background-position: center center;
}

@media (max-width:992px) {
  .mydiv {
    background: url(../img/background2.jpg) no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
  }
}

编辑：我注意到当我检查元素并触摸.mydiv时，奇怪的东西消失了，所以我想知道是否有办法让Javascript或JQuery刷新我的元素或类似的东西。< / p>

Answer 1

我立即看到了一些事情：

在@media和(max-width:992px)
您使用的是mydiv元素，还是应该是类或ID名称？如果它是一个类或ID，那么您需要在CSS中将其称为.mydiv（类）或#mydiv（ID）。

Here's a working jsfiddle.

Answer 2

正确地重写媒体查询，添加一个空格，如果你希望更清晰，可以使用@media本身就意味着定义@media all，但你也可以使用参数但是你需要添加< / p>

我在这种情况下仅使用768px进行测试。使用您需要的值更新它。

      @media screen and (max-width: 768px) {

      }

DEMO CODE

html,body{
    height:100%;
}
.mydiv {
    width:100%;
    height:100%;
  background: url('http://placehold.it/1000x1000/FFF/000') no-repeat;
  background-size:cover;
  background-position: center center;
}

@media (max-width: 768px) {
  .mydiv {
    background: url(http://placehold.it/1000x1000/) no-repeat;
    background-position: center center;
  }
}

查看此演示：

https://jsfiddle.net/a_incarnati/v575uvyb/5/

媒体查询div背景图像改变怪异

2 个答案: