我有一个div
元素,它将根据浏览器屏幕的大小包含不同的背景图像。
这是一个将执行响应式工作的 CSS 示例:
div {
background-image: url(a.jpg);
}
@media screen and (min-width: 700px) {
div {
background-image: url(b.jpg);
}
}
上面的示例 CSS 工作正常,直到我使用 jQuery 设置背景图像。换句话说,在 jQuery 设置 的 之后background-image
,div
响应不再起作用。
对我来说,响应停止工作是有道理的,因为浏览器不知道如果/当用户调整浏览器窗口大小时我希望允许响应继续工作。但是,就我而言,我确实希望浏览器窗口的大小调整始终覆盖background-image
jQuery 可能在调整大小之前设置的值。
这可以在 CSS 中解决还是我需要用脚本来管理它?(注意:!important
不成功)。
在这个小提琴中,您将看到在调整浏览器窗口大小时背景图像如何适当变化。当且仅当您单击其中一个按钮时,响应性才会停止工作。