通过响应式css更改我的手机徽标图像

我只想使用CSS向我的移动用户显示不同的图像，因为我没有访问html代码的权限

在手机上时，我在标题徽标图像img{中添加了display:none，然后在div中添加了一个背景url，成功地显示了我的备选徽标。唯一的问题是，当我切换到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">

---

要在移动设备上切换徽标，这是一个选项：

HTML

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

---

希望这有帮助！

我最终使用了以下方法：

@media only screen and (max-width:800px) {
.navbar-brand img { opacity: 0; }
.navbar-brand {
    background: url(PATH_TO_IMG}/logo_small.png) no-repeat center;
    width:200px;
}
}

这样我就可以保留现有的徽标CSS并在那里归档。

添加CSS

@仅媒体屏幕和（最大宽度：767px）{
#标志{
内容：url（“http://yourwebsite.com/mobile_logo.png");
}
}
@仅介质屏幕和（最小宽度：767px）{
#标志{
内容：url（“http://yourwebsite.com/large_logo.png");
}
}

显然，当我以肖像模式拿着手机时，我的手机不再是手机：-DIt这样做了，你可以编辑媒体查询来捕获这个@JanDvorak，或者只编辑

最大宽度

如果我无法访问html/code，href url链接怎么办？@pnumbers

href

链接怎么办？它会像往常一样工作

@media only screen and (max-width:800px) {
.navbar-brand img { opacity: 0; }
.navbar-brand {
    background: url(PATH_TO_IMG}/logo_small.png) no-repeat center;
    width:200px;
}
}