在背景颜色前悬停更改透明背景图像

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>