使用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特異性是一個非常好的主意，因爲您的代碼在將來會更易於維護。