Question

删除背景图像css或jquery（最好是css）。

我遇到无法使用css设置背景图像的情况。

我在stackoverflow中读到了所有类似的问题，但我找不到解决方案。

HTML

<div class="foo" style="background-image:url(http://example.com/gallery/albums/foo.jpg);">
 </div>

CSS

.foo{
    width 400px;
    height:300px;
}
@media screen and (max-width: 200px) {
    .foo{
        background-image: none;
    }  
}

JSFIDDLE Here

Answer 1

问题在于您为背景图像使用内联样式，而媒体查询样式使用css类，内联样式为more specific。

试试这个：

https://jsfiddle.net/6t7ksdaL/3/

.foo{
    width 400px;
    height:300px;
    background-image:url(http://strabo.com/gallery/albums/wallpaper/foo_wallpaper.sized.jpg);
}
@media screen and (max-width: 200px) {
    .foo{
        background-image: none;
    }  
}

背景图像现在在css类中定义，因此它的特异性与媒体查询css相同。当屏幕调整大小时，超越就会开始。

请注意，关注css特异性是一个非常好的主意，因为将来您的代码将更易于维护。

Answer 2

只要将背景添加到外部css定义并将其从内联样式中删除，这将立即生效。

内联css始终优先于外部css - 这样，你的@media - 查询会被inline-css覆盖。

＆＃13;

.foo {
  width 400px;
  height: 300px;
  background-image: url(http://strabo.com/gallery/albums/wallpaper/foo_wallpaper.sized.jpg);
}
@media screen and (max-width: 200px) {
  .foo {
    background-image: none;
  }
}

＆＃13;

<div class="foo">
</div>

＆＃13;

使用css / jquery隐藏较小的背景图像

2 个答案: