通過響應式css更改我的手機徽標圖像

Question

我想向僅使用CSS的移動用戶顯示不同的圖像，因爲我無權訪問html代碼。

當我在手機上添加了display：none到header-logo-image img {然後添加一個background-url到成功顯示我的替代標識的div。唯一的問題是當我切換到div中的背景圖片時，我失去了我的其他img提供的主頁鏈接。

有沒有辦法繞過這個，所以我可以得到背景圖片鏈接？ 這是CSS圖像精靈可以進來，但在img上使用它們嗎？

<div id="header-logo-image"> 
<a href="http://example.com/folder/"> 
<img src="http://example.com/folder/wp-content/uploads/2016/01/head-logo.png"> 

Answer 1

要切換標誌時，在移動設備上，這是一個選項：

HTML

<a class="navbar-brand" href="/"></a> 

CSS

.navbar-brand { 
    background: url(PATH_TO_IMG/logo.png); 
    width:220px; 
    height:65px; 
    margin-left:5px; 
} 
@media only screen and (max-width:800px) { 
    .navbar-brand { 
     background: url(PATH_TO_IMG}/logo_small.png) no-repeat center; 
     width:70px; 
    } 
} 

Example

希望這有助於！