0

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

这是一个将执行响应式工作的 CSS 示例:

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

上面的示例 CSS 工作正常,直到我使用 jQuery 设置背景图像。换句话说,在 jQuery 设置 的 之后background-imagediv响应不再起作用。

对我来说,响应停止工作是有道理的,因为浏览器不知道如果/当用户调整浏览器窗口大小时我希望允许响应继续工作。但是,就我而言,我确实希望浏览器窗口的大小调整始终覆盖background-imagejQuery 可能在调整大小之前设置的值。

这可以在 CSS 中解决还是我需要用脚本来管理它?(注意:!important不成功)。

在这个小提琴中,您将看到在调整浏览器窗口大小时背景图像如何适当变化。当且仅当您单击其中一个按钮时,响应性才会停止工作。

4

1 回答 1

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

如果您想要其他样式保留仅删除背景图像

$(window).on('resize',function(){
    $('div').css('background-image','');
});
于 2015-05-20T23:34:03.583 回答