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

我不确定我是否正确地提出了这个问题，这是你想要的吗？如果您将网址更改为背景图片，则只会在图片悬停时加载图片，而在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>

在翱翔时改变透明背景图像在背景颜色前面

2 个答案: