背景图像在 jQuery 设置 CSS 后没有响应

Question

我有一个 div 元素，它将根据浏览器屏幕的大小包含不同的背景图像。

下面是一个 CSS 将执行响应式工作的示例：

div {
    background-image: url(a.jpg);
}
@media screen and (min-width: 700px) {
    div {
        background-image: url(b.jpg);
    }
}

在我使用 jQuery 设置背景图像之前，上面的示例 CSS 工作正常。也就是说，jQuery设置了div的background-image后，响应性就失效了

我认为响应停止工作是因为浏览器不知道我想让响应继续工作if/when用户调整浏览器大小window.但是，就我而言，我确实希望浏览器 window 的大小调整始终覆盖 jQuery 可能在调整大小之前设置的 background-image。

这是否可以在 CSS 中解决，或者我需要使用脚本来管理它吗？（注意：!important 不能解决问题）。

In this fiddle，您将看到当您调整浏览器大小时背景图像如何适当地改变 window。当且仅当您单击其中一个按钮时，响应停止工作。

Answer 1

$(window).on('resize',function(){
    $('div').removeAttr('style');
});

如果您希望保留其他样式，请仅删除背景图片

$(window).on('resize',function(){
    $('div').css('background-image','');
});

Background Image Is Not Responsive AFTER jQuery Sets CSS