.png图片不显示在铬

我刚刚添加了几个社交媒体图标到我的网站。它们在safari和firefox中显示效果不错，但不是在Chrome中显示效果。.png图片不显示在铬

我发现一个可能的答案可能是如何处理png文件的保存方式。有谁知道为什么这会影响铬是否能够显示图像？或者是我的代码中的东西？

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>

来源

2017-01-24 charliesd

可能是浏览器缓存。尝试清除您的缓存在铬的设置 – amallard

我会使用精灵而不是个别图像。对于单个图像，直到悬停状态时才会请求悬停图像。在第一次悬停时下载图像时，这可能会导致闪烁。 – hungerstar

尝试清除浏览器缓存。

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

在Chrome中，

点击More按钮（右上角）
选择Settings
搜索cache
选择clear browsing data...
检查images and files
按b utton
刷新您的网站

来源

2017-01-24 15:33:17 amallard

使用CSS是这样的：在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); 
     }

ID的意思是唯一的，这样，你就不必从他们的父母打电话给他们，而不是

section #contact #instagram

只使用

#instagram

来源

2017-01-24 15:36:18 Zecide

.png图片不显示在铬

回答

相关问题