.png图像未显示在chrome中

I have just added a couple of social media icons to my website. They display fine in safari and firefox but not in chrome.

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

I found a possible answer might be to do with the way the png file has been saved. Does anyone know why or how this would affect whether chrome is able to display the image? or is it something in my code?

我发现可能的答案可能与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>

2 个解决方案

#1

Try clearing your browser cache.

尝试清除浏览器缓存。

Browsers will store parts of websites in memory, or cache, so it can load faster for you the next time you view it.

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

In Chrome,

在Chrome中，

Click on the More button (upper right hand corner)
单击“更多”按钮（右上角）
Select Settings
选择设置
Search for cache
搜索缓存
Select clear browsing data...
选择清晰的浏览数据......
Check images and files
检查图像和文件
Press the Clear browsing data button
按清除浏览数据按钮
Refresh your website
刷新您的网站

#2

use css like this :

像这样使用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);
        }

IDs in css are meant to be unique so, you don't have to call them from their parents, instead of

css中的ID是唯一的，因此，您不必从父母那里调用它们，而不是

section #contact #instagram

just use

只是用

#instagram

#1