CSS3过渡背景图像在悬停闪烁问题上

Question

我使用CSS3的背景图像过渡有问题。问题在于，它偶尔会在您第一次滚动时会闪烁。如果您第二次滚动，这绝对没有问题，从而使从一个到另一个的淡出/淡出淡出。

我已经搜索了Google有关此问题的信息，发现一群人遇到了同样的问题。但是他们通过使用1个背景图像解决了问题，然后使用背景位置将其隐藏直到您滚动。

我不能对我做到这一点，因为我需要从1张到另一个图像的平滑淡入/淡入淡出的动画（这是带有不同颜色和东西的同一按钮的2张图像。）如果我使用背景 - 位置它将来自位置上的按钮下方。我需要一个淡入淡出的淡入淡出动画。

所以我猜这个问题是因为没有加载图像，因此需要一秒钟才能加载。

这是代码：

    .btn-denken{
        background:url(../images/btn-denken.png);
        width:219px;
        height:40px;
        float:left;
        -webkit-transition: all 0.3s ease-in-out 0s;
        -moz-transition: all 0.3s ease-in-out 0s;
        -ms-transition: all 0.3s ease-in-out 0s;
        -o-transition: all 0.3s ease-in-out 0s;
        transition: all 0.3s ease-in-out 0s;
    }
    .btn-denken:hover{
        background:url(../images/btn-denken-hover.png);
    }

帮助非常适合！谢谢！

Answer 1

诀窍是确保您要进行过渡的图像已经由CSS加载，这就是为什么将它们放入文档中的假人并通过CSS加载它们是解决方案的原因。

在下面的示例中，我有4个图像（0.jpg -3.jpg），如果我现在在文档（html）上设置类'.landing -1'，则图像正确过渡。

在我的CSS中：

body {
    -webkit-transition: background 1s;
    background: url(0.jpg) no-repeat center center / cover fixed;
}
.dummy-image {
    position: absolute;
    left: -100%; /* to hide the dummy */
}

简单的JavaScript来缓存图像：

var images = [],
    load = function() {
        $('head').append('<style>html.landing-'.concat(this.index, ' body.landing, .dummy-image-', this.index, ' { background: url(', this.src, ') no-repeat center center / cover fixed; }</style>'));
        $('body').append('<div class="dummy-image dummy-image-'.concat(this.index, '">'));
      };
for(var i=0; i<4; i++) {
    var image = document.createElement('img');
    image.src = i + '.jpg');
    image.index = i;
    image.onload = load;
    images.push(image);
}

Answer 2

也许您可以使用绝对定位和z索引在同一区域中使用两个单独的容器。设置每个容器一个一个不同的背景图像，然后将悬停在悬停时，只需使顶部容器的不透明度完全透明。

Answer 3

我也有同样的问题：我想使用过渡在图像之间褪色。使用2合1图像（或精灵）并使用CSS更改其在悬停的位置无效，因为您最终会看到图像滚动的侧面或上下。

（仅供参考，您是正确的 - 眨眼发生了，因为加载图像需要片刻，但是从悬停的那一刻起，过渡已经开始。悬停在一次后，图像已经加载了，因此它赢了't再次发生，直到您重新加载页面为止。）

这是纯HTML和CSS解决方案：

• 创建一个包含Div
• 将锚标签和图像标签放在此容器中
• 在锚标签上设置背景图像（这应该是您要在页面上显示的图像）
• 图像标签应该是您要在悬停在悬停上显示的图像，并且需要应用z指数以将其带到锚标签后

---

经过大量实验，我提出了以下解决方案：（演示此处： http://jsfiddle.net/jmtfk/）

html：

<div class="button" id="specific">
    <a href="" class="link" target=""></a>
    <img>
</div>

CSS：

.button {
    position: relative;
}
.button a {
    display: block;
    width: px;
    height: px;
    background: url() no-repeat;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transition: opacity 0.2s ease;
    -moz-transition: opacity 0.2s ease;
    -ms-transition: opacity 0.2s ease;
    -o-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
}
.button a:hover {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}
.button img {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}
.button a:hover + img {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transition: opacity 0.3s ease;
    -moz-transition: opacity 0.3s ease;
    -ms-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

我最初没有将我的z索引图像设置为透明，发现它的边缘出现在链接图像的外部周围。这很丑陋，所以我应用了不透明度：0。

我还为"悬停"one_answers"悬停"添加了CSS过渡。（基本上，应用于某个CSS状态的过渡设置决定了其过渡该状态的方式。答：悬停不再适用。

我希望有帮助。