在背景顏色前懸停更改透明背景圖像

Question

我在這裏搜索過，似乎無法找到任何線程來解決我遇到的問題。如果我錯過了某些東西，但是我很抱歉！

我正在爲希望徽標在懸停狀態下更改的客戶端工作，同時在懸停時分配背景顏色。該徽標部分是透明的，所以背景色旨在顯示徽標。

我已經有了一些工作，但我得到一個討厭的結果，在第一個鼠標懸停，背景顏色似乎覆蓋整個圖像作爲彩色正方形。隨後的徘徊按預期工作。

這讓我想知道這個問題是否延遲了服務器提供的圖像。我試着預裝它們，但沒有運氣。

我在Codepen有一個原型，下面的源代碼！ http://codepen.io/JD1990/pen/mPagaz

HTML

<div class="test"> 
    <img src="http://dummyimage.com/318x318/ffffff/ffffff.png"> 
</div> 

CSS

#preload-01 { 
    background: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc-inverse.png) no-repeat -9999px -9999px; 
} 

.test { 
    display: inline-block; 
    position: relative; 
} 
.test:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: rgba(0,0,0,0); 
    background-image: url(http://new-site-jd-5-5-16.new-site- fa.appspot.com/static/content/client-logo-bbc-inverse.png); 
    background-image: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc.png); 
} 

.test:hover:after { 
    background-image: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc-inverse.png); 
    background-color: black; 
} 

任何提示非常感謝，我還是用CSS相當缺乏經驗，所以，謝謝你提前:)

Answer 1

我不知道我得到了正確的問題，這是你要什麼？ 如果您將url更改爲背景圖片，則只會在圖片懸停時加載圖片，同時將圖片放入html中會使瀏覽器立即加載圖片。一個更好的選擇是將這些圖像一個接一個放在photoshop中並將它們合併爲一個精靈，然後在懸停時只需更改背景位置即可顯示其中一個。

body { 
 
    background-color: #BADA55; 
 
} 
 
.test { 
 
    position: relative; 
 
} 
 

 
.wt { 
 
    background-color: white; 
 
} 
 

 
.blk { 
 
    background: black; 
 
    display: none; 
 
} 
 

 
img { 
 
    position: absolute; 
 
} 
 

 
.test:hover img { 
 
    display: none; 
 
} 
 

 
.test:hover .blk { 
 
    display: block; 
 
}

<div class="test"> 
 
    <img class="wt" src="http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc.png"> 
 
    <img class="blk" src="http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc-inverse.png" alt="" /> 
 
</div>

Answer 2

增加非常快的轉變到背景顏色，並刪除原來的背景顏色，因爲它不是必要的。

此外，由於圖像未被更改，我將其從:hover規則中移除，因爲它不是必需的。我認爲這可能是問題所在。

body { 
 
    background: pink; 
 
} 
 
.test { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
.test:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-image: url(http://new-site-jd-5-5-16.new-site-fa.appspot.com/static/content/client-logo-bbc.png); 
 
    transition: background-color 0.1s ease; 
 
} 
 
.test:hover:before { 
 
    background-color: #000; 
 
}

<div class="test"> 
 
    <img src="http://dummyimage.com/318x318/ffffff/ffffff.png"> 
 
</div>