Question

我遇到了使用CSS3进行背景图像转换的问题。问题是它第一次滚动它时偶尔会闪烁。如果你第二次翻转它没有问题，可以使一个到另一个的平滑淡入/淡出。

我搜索谷歌关于此问题发现一群人有同样的问题。但是他们通过使用1个背景图像然后使用背景位置来隐藏它直到你滚动它来解决这个问题。

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

所以我猜这个问题发生的原因是图像没有被加载，并且需要一小段时间来加载。

以下是代码：

    .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-index在同一区域中使用两个单独的容器。为每个容器设置两个不同的背景图像，然后当您悬停时，只需使顶部容器的不透明度完全透明。

Answer 3

我遇到了同样的问题：我想在图像之间使用转换淡入淡出。使用二合一图像（或精灵）并使用css更改它在悬停时的位置并不起作用，因为您最终会看到图像在侧面或上下滚动。

（仅供参考，你是正确的 - 发生眨眼是因为加载你的图片花了一点时间，但是从你盘旋的那一刻起就已经开始转换。在你徘徊一次之后，图像已经加载所以在你重新加载页面之前它不会再发生。）

这是一个纯HTML和CSS解决方案：

创建包含div
在此容器中放置锚标记和图像标记
在锚标记上设置背景图像（这应该是您要在页面加载时显示的图像）
图像标记应该是您想要在悬停时显示的图像，并且需要应用z-index才能将其置于锚标记后面

经过多次实验，我得出了以下解决方案：（在此演示： 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-indexed图像设置为透明，并发现它的边缘出现在链接图像的外部。这很难看，所以我应用了不透明度：0。

我还为＆＃34; hover in＆＃34;添加了CSS过渡。并且＆＃34;徘徊在＆＃34;。（基本上，应用于特定CSS状态的转换设置决定了它如何将转换为状态。例如，应用于 .button a 的转换设置在按钮时生效a：悬停不再适用。

我希望有所帮助。

关于悬停闪烁问题的CSS3过渡背景图像

3 个答案: