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

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的定义，并从内联样式删除它尽快工作。

内联的CSS总是优先于外部的CSS - 这样，你的@media -query被inline-css覆盖。

.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; 
 
    } 
 
}

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

Answer 2

的问题是，你使用的背景图像的内嵌样式和媒体查询风格和内联样式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特异性是一个非常好的主意，因为您的代码在将来会更易于维护。