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按钮（右上角）
选择Settings
搜索cache
选择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应该是唯一的，因此，您不必从父母那里调用它们，而不是

section #contact #instagram

只需使用

#instagram

.png图片未显示在Chrome

2 个答案: