.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圖片不顯示在鉻

回答

相關問題