Question

我正在尝试将div背景图像更改为悬停时的新图像，并且它正常工作，但是，当图像被交换时，它会稍微移动。有没有办法消除这种转变效应？

.temptext {
    background: url("my-img1.png");
    background-size: 35% 33%;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    position: absolute;
    margin-left: 33%;
    margin-top: 38%;
}

.temptext:hover {
    background: url("my-img2.png");
    background-size: 35% 33%;
    background-repeat: no-repeat;
    background-position-x: 3.6px;
    background-position-y: -.35px;
}

我尝试使用background-position-x / y来指定像素移位，这几乎完全消除了它，但是我现在已经手动降低到小数位的百万分之一并且它仍然每次都在微微移动。任何建议或替代解决方案？

Answer 1

您应该将两个图像组合成一个精灵以避免闪烁。

Answer 2

好的，我弄清楚问题是什么。由于两幅图像的像素尺寸完全相同（1600x750），因此图像因为将其读取为比初始图像“更大”而自行移动。当我将悬停图像画布大小更改为比原始图像小一个像素时，移动被消除。这显然是一个问题，文本在翻转时也会改变字体大小和类似的效果。

在悬停时消除div转移

2 个答案: