Question

我想仅使用CSS向移动用户显示不同的图像，因为我无法访问html代码。

在移动设备上时，我在header-logo-image img {中添加了display：none，然后在div中添加了一个background-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">

Answer 1

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

<强> HTML

<customErrors mode="RemoteOnly" defaultRedirect="Error">
  <error statusCode="403" redirect="Error" />
  <error statusCode="404" redirect="Error" />
  <error statusCode="500" redirect="Error" />
</customErrors>

<强> CSS

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

Example

希望这有帮助！

Answer 2

我最终使用了这个：

@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保留在此处并保存文件。

Answer 3

添加您的CSS

@media only screen and (max-width: 767px) {
  #logo {
    content: url("http://yourwebsite.com/mobile_logo.png");
  }
}

@media only screen and (min-width: 767px) {
  #logo {
    content: url("http://yourwebsite.com/large_logo.png");
  }
}

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

3 个答案: