html - .png 图像未在 chrome 中显示

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 中，

• 点击更多按钮(右上角)
• 选择设置
• 搜索缓存
• 选择清除浏览数据...
• 检查图像和文件
• 按清除浏览数据按钮
• 刷新您的网站