Css 用媒体查询替换图像不工作

我正在使用一个HTML模板，我正在尝试使用媒体查询替换基于浏览器大小的站点徽标

我正在尝试我在这里发现的技术：

我的custom.css文件包含以下代码：

.test-mobile-logo{
   display: none;
}

@media only screen and (max-width: 500px){           
    .test-main-logo{
     display: none;
   }

   .test-mobile-logo{
     display: block;
   }
}

我的html文件包含以下徽标代码：

<div class="logo"> 
                <a href="index.html" >
                    <img src="images/logo-dark.png" alt="" class="test-main-logo">
                    <img src="images/logo-main.png" alt="" class="test-mobile-logo">
                </a> 
            </div>

但页面同时显示了两幅图像。但是当我删除style.css文件时，图像最终会一次显示一个，并正确替换

style.css文件：

---

我不确定冲突是什么，我还是CSS新手。有人有什么想法吗？

您的css中有一种样式覆盖了您的显示样式

img {
  display: inline-block !important;
}

---

删除

！重要信息

使您的媒体查询工作。

您的css中有此样式，它覆盖了您的显示样式

img {
  display: inline-block !important;
}

---

删除

！重要信息

使您的媒体查询工作。

如@VincentOrback所述，只需删除

！重要信息

来自

img

选择器

更好的技术：使用背景图像，只需更改url，或者（更好）使用

---

正如@VincentOrback提到的，只需删除

！重要信息

来自

img

选择器

更好的技术：使用背景图像，只需更改url，或者（更好）使用

---

我同意@HenrikhKantuni使用背景图像并在css媒体查询中更改背景图像

---

否则，用户将始终下载2个图像，这是一个不必要的http请求和用户将请求的KB，特别是通过移动网络，您希望尽可能减少这一点。

我同意@HenrikhKantuni使用背景图像并在css媒体查询中更改背景图像

---

否则，用户将始终下载两个图像，这是一个不必要的http请求，用户将请求千字节，尤其是通过移动网络，您希望尽可能减少这种情况。

@OP the！重要条款可能会导致像这样的各种意外副作用，除非你们有充分的理由，否则应该严格避免。谢谢！我还在学习CSS，这对我帮助很大！也感谢@Bosworth99提供的额外评论。请确保删除它不会破坏您网站上的其他内容。祝你学习顺利！：）@哎呀！重要条款可能会导致像这样的各种意外副作用，除非你们有充分的理由，否则应该严格避免。谢谢！我还在学习CSS，这对我帮助很大！也感谢@Bosworth99提供的额外评论。请确保删除它不会破坏您网站上的其他内容。祝你学习顺利！：）