Css 悬停在PNG图像上时的背景偏移/失真

这是我在Chrome中遇到的一个问题。这在Firefox中不会发生。我将在底部提供CSS、HTML和Jquery示例

问题是：当我将鼠标悬停在PNG上时（现在正好在carousel jquery插件中），一个悬停图像将替换初始PNG。甚至当我使用Jquery的拖放功能拖动元素时，也会发生这种情况。它的工作没有任何问题，但当它发生时，背景会发生轻微的移动或在一秒钟内发生扭曲。这不是一个很好的用户体验，我想知道是否有人知道如何修复它。让我知道你需要看什么代码

代码示例

HTML:

Jquery：

       $("#img-home").hover(
    function () {
          $("#img-home-src").attr("src","<?php echo base_url();?>files/assets/images/homepage/img_hover.png");
    }, 
    function () {
          $("#img-home-src").attr("src","<?php echo base_url();?>files/assets/images/homepage/img.png");
    }
  );

$（“#img home”）。悬停(
函数（）{
$（“#img home src”）.attr（“src”、“files/assets/images/homepage/img#u hover.png”）；
}, 
函数（）{
$（“#img home src”）.attr（“src”、“files/assets/images/homepage/img.png”）；
}
);

我觉得那个代码是合法的。我不能把这个放在上面的评论中，所以这只是意见，不是答案。这可能是因为第一个图像在加载页面的同时加载，而secon是按需加载的。在悬停功能和从服务器完全下载图像之间，背景会移动一秒钟。试着把第二张图片放在页面的某个地方，就在上面，给她显示：隐藏或类似的东西。重点是加载将以现金形式保存并在调用悬停功能时使用的图像。

我认为（正如前面的答案所提到的）这是一个缓存/加载问题。简单的解决方法是通过CSS在背景图像上设置一个

背景图像

，以便它预加载图像：

演示：

HTML（CSS声明为内联，因此您仍然可以轻松使用PHP）：

文件/资产/图像/主页/img_hover.png）；“alt=”“/>
​

CSS：相同

jQuery:相同

您真的需要使用jQuery在悬停状态下切换图像吗？
这是一个相当繁重的解决方案，这也会给缓存带来问题，因为只有在悬停操作时才开始下载新映像

您可以使用纯css通过sprite技术来实现您的目标（改善用户体验），该技术将下载额外图像的时间减少到零，因为每个状态（悬停，活动）的每个图像组合在一个小图像中，可立即加载：

阅读有关精灵的更多信息：

---

img

元素本机是

内联块

，因此不需要声明。如果不使用CSS重置，请将重置作为参考。它将有助于消除浏览器之间的呈现差异

有正当的理由以内联方式加载图像，而不是作为CSS背景加载图像——所以就这样吧

**HTML**
<img src="img1" class="over">
<img src="img2" class="out">

**CSS**
@import url (reset.css);

img.over, img.out { position:absolute; z-index:2; }
img.out { z-index:1; }

**jQuery**
$('.over').mouseover(
    function() {
        $(this).next('img').css('z-index',3);
    }
);
$('.out').mouseout(
    function() {
        $(this).css('z-index',2);
        $(this).prev('img').css('z-index',3);
    }
);

**HTML**
**CSS**
@导入url（reset.css）；
img.over，img.out{位置：绝对；z-索引：2；}
img.out{z-index:1；}
**jQuery**
$（'.over'）。鼠标悬停(
函数（）{
$（this）.next（'img'）.css（'z-index'，3）；
}
);
$（'.out'）.mouseout(
函数（）{
$（this.css（'z-index'，2）；
$（this.prev（'img'）.css（'z-index'，3）；
}
);

我使用的是

mouseover/out

而不是

hover

，因为一旦顶部图像被隐藏或推到堆栈底部，浏览器就会将其解释为hover:out（因此它会变成一个闪烁的元素）

---

HTH

不幸的是，我没有充分探讨这个问题，没有准确指出问题的原因，但我发现了问题。我没有向大家提及代码的其他部分，因为我不知道这是问题的原因。因此，在这一点上道歉是必要的

罪魁祸首是页面的背景图像。以下是CSS的内容：

.background {
    background:url(../images/background/5.jpg) no-repeat;
    background-size:100% auto;
    -moz-background-size: 100% auto;         /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% auto;           /* Opera 9.5 */
    -webkit-background-size: 100% auto;      /* Safari 3.0 */
    margin:0;
    padding:0;
    opacity: 1;
    height: 100%;
    position:absolute;
    width:100% !important;
    z-index:-2000;
    left:0;
    top:0;
}

所有这些代码在Firefox和其他浏览器中都可以正常工作，但在Chrome中却不行。Chrome出现问题的原因是

背景大小：100%自动；

行。为了解决这个问题，我做了以下几点：

HTML:

CSS:

---

瞧，在拖放和悬停事件中都没有失真问题。

你是如何实现悬停的？你能制作一个简短的html示例吗？图像源是正确的，所以不管是关于的部分，那只是一些CI（PHP）代码。这里是粘贴库：最明显的事情是检查img.png和img_hover.png的宽度和高度是否完全相同。它们分别是：386 x 484。在jsFiddle.net上发布一个示例。纯css方式为+1。除此之外，还有其他“仅css”方式（IMHO）效果最好。这是两个图像的简单解决方案。但我认为他希望通过php动态创建一些图像（如示例所示）正因为如此，他需要'src'标签。+1精灵才是最好的选择。你永远不应该只使用css就可以实现js，仍然有用户禁用了js…谢谢你的回答。我能够通过css解决这个问题，所以我完全同意上面的评论。我的问题是一个结果CSS和Chrome中的一些问题。但是，我不知道问题的确切原因，但现在已经解决了。请查看下面我的答案。不，这是Chrome的问题。我已经为此进行了测试。谢谢你的答案。我感谢你的答案。很快就可以解决问题了。不过，请看我的答案。我终于找到了问题，而不是我提供的代码e各位。我很抱歉。谢谢你们的回答。我很抱歉，但我直到不久前才知道问题出在哪里。有关详细信息，请参阅我的回答。

<li id="img-home">
    <img id="img-home-src" src="http://dummyimage.com/386x484/000/0011ff&text=Test+Image" style="background-image: url(<?php echo base_url();?>files/assets/images/homepage/img_hover.png);" alt="" />
</li>​

#img {
    width: 300px;
    height: 150px;
    background: url('//placekitten.com/g/300') no-repeat; 
}

#img:hover { background-position: 0 100%; }

**HTML**
<img src="img1" class="over">
<img src="img2" class="out">

**CSS**
@import url (reset.css);

img.over, img.out { position:absolute; z-index:2; }
img.out { z-index:1; }

**jQuery**
$('.over').mouseover(
    function() {
        $(this).next('img').css('z-index',3);
    }
);
$('.out').mouseout(
    function() {
        $(this).css('z-index',2);
        $(this).prev('img').css('z-index',3);
    }
);

.background {
    background:url(../images/background/5.jpg) no-repeat;
    background-size:100% auto;
    -moz-background-size: 100% auto;         /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% auto;           /* Opera 9.5 */
    -webkit-background-size: 100% auto;      /* Safari 3.0 */
    margin:0;
    padding:0;
    opacity: 1;
    height: 100%;
    position:absolute;
    width:100% !important;
    z-index:-2000;
    left:0;
    top:0;
}

.bg {
    width:100%;
    margin:0;padding:0;border:0;
    height: auto;
    min-width:960px;
    z-index:-2000;
    position:absolute;
}