chrome 中未显示 .png 图片

Question

我刚刚在我的网站上添加了几个社交媒体图标。它们在 safari 和 firefox 中显示良好，但在 chrome.

中显示不佳

我发现一个可能的答案可能与 png 文件的保存方式有关。有谁知道为什么或如何影响 chrome 是否能够显示图像？或者它在我的代码中？

section #contact .icon {
  height: 50px;
  width: 50px;
  float: center;
  padding: auto;
  margin: 10% auto;
}
section #contact #instagram {
  background-image: url(images/instagram.png);
  background-size: contain;
  display: block;
  float: center;
  width: 100%;
  height: 100%;
}
section #contact #instagram:hover {
  background-image: url(images/instagram-grey.png);
}
section #contact #facebook {
  background-image: url(images/facebook.png);
  background-size: contain;
  display: block;
  float: center;
  width: 100%;
  height: 100%;
}
section #contact #facebook:hover {
  background-image: url(images/facebook-grey.png);
}

<section class="content" id="contact">

  <a class="anchortag" name="Contact"></a>
  <h3>Contact</h3>
  <!-- email -->
  <p><a href="mailto:emailaddress" aria-haspopup="true">email</a>
  </p>
  <!-- Facebook -->
  <div class="icon">
    <a id="facebook" title="facebook" href="https://www.facebook.com/" aria-haspopup="true" target="_blank"></a>
  </div>
  <!-- Instagram -->
  <div class="icon">
    <a id="instagram" title="instagram" href="https://www.instagram.com/" aria-haspopup="true" target="_blank"></a>
  </div>

</section>

Answer 1

尝试清除浏览器缓存。

浏览器会将部分网站存储在内存或缓存中，以便您下次查看时加载速度更快。

在Chrome,

单击 More 按钮（右上角）
Select Settings
搜索 cache
Select clear browsing data...
勾选images and files
按下 Clear browsing data 按钮
刷新您的网站

Answer 2

像这样使用 css：

       .icon {
            height: 50px;
            width: 50px;
            float: center;
            padding: auto;
            margin: 10% auto;
        }

        #instagram {
            background-image: url(https://dummyimage.com/50/000000/fff);
            background-size: contain;
            display: block;
            float: center;
            width: 100%;
            height: 100%;
        }

        #instagram:hover {
            background-image: url(https://dummyimage.com/50/000000/fff);
        }

        #facebook {
            background-image: url(https://dummyimage.com/50/000000/fff);
            background-size: contain;
            display: block;
            float: center;
            width: 100%;
            height: 100%;
        }

        #facebook:hover {
            background-image: url(https://dummyimage.com/50/000000/fff);
        }

css 中的 ID 应该是唯一的，因此您不必从 parents 中调用它们，而不是

section #contact #instagram

只需使用

#instagram

chrome 中未显示 .png 图片

.png image not showing in chrome

html

css

png

google-chrome