Change image using only CSS

我用的是215主题。

我有一个标志设置使用可湿性粉剂定制。

我想在mobile或tablet view上更改图像。

断点小于59.6875em。

我正在使用以下代码：

@media only screen and (max-width: 59.6875em) {
  .custom-logo {
    content: url("https://www.example.com/example/wp-content/uploads/Logo_Wide_2x.png");
        width: 300px;
  }
}

它适用于Chrome，但不适用于Firefox。

我尝试添加：before和：after并添加a 标签，正如其他答案所建议的那样，但这些都不起作用。

谁能告诉我出了什么问题，以及我如何在Firefox上实现这一点？

以下是html：

<div class="site-branding">
    <a href="https://www.example.com/example/aa00/" class="custom-logo-link" rel="home" itemprop="url"><img src="https://www.example.com/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x.png" class="custom-logo" alt="Seed" itemprop="logo" srcset="https://www.example.com/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x.png 248w, https://www.example.com/example/aa00/wp-content/uploads/sites/2/2019/04/cropped-Logo_248_2x-150x150.png 150w" sizes="(max-width: 248px) 100vw, 248px" width="248" height="248"></a>
</div>

@media screen and (max-width: 59.6875em) { .site-branding img { display:none; } .site-branding a::before { content: url("https://www.example.com/example/wp-content/uploads/Logo_Wide_2x.png"); } }

<style> /* hide mobile version by default */ .logo .mobile { display: none; } /* when screen is less than 59.6875em wide show mobile version and hide desktop */ @media (max-width: 59.6875em) { .logo .mobile { display: block; } .logo .desktop { display: none; } } </style> <div class="logo"> <img src="/images/logo_desktop.png" class="desktop" /> <img src="/images/logo_mobile.png" class="mobile /> </div>

小码农CODE

相关推荐

不通过css删除移动滑块