css - 在悬停在背景颜色前面时更改透明背景图像

Question

我在这里进行了搜索，但似乎找不到任何线程来解决我遇到的问题。如果我遗漏了什么，我深表歉意!

我正在为一位客户工作，他希望 Logo 在悬停状态下发生变化，同时在悬停时分配背景颜色。 Logo 是部分透明的，因此背景颜色旨在通过 Logo 显示。

我有一些工作，但我得到了一个恼人的结果，即在第一次鼠标悬停时，背景颜色似乎以彩色方 block 的形式覆盖了整个图像。随后的悬停会按预期工作。

这让我想知道问题是否出在提供图像的服务器延迟上。我尝试预加载它们，但没有成功。

我在 Codepen 中有一个原型(prototype)，下面是源代码! 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 中将这些图像一张一张地放置并将它们组合成一个 Sprite ，然后在悬停时您只需更改背景位置以显示一个或另一个。

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>