0

我在使用 CSS3 的背景图像转换时遇到问题。问题是第一次翻身时它偶尔会闪烁。如果您第二次翻转它，那么从一个到另一个平滑淡入/淡出是没有问题的。

我在谷歌上搜索过这个问题，发现很多人有同样的问题。但是他们通过使用 1 个背景图像然后使用 background-position 隐藏它直到您将其翻转来解决了这个问题。

我不能用我的，因为我需要从 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);
    }

非常感谢帮助！谢谢！

4

3 回答 3

2

The trick is to make sure that the images you want to do transition on are already loaded by CSS, that's why putting them in the document as dummy's and loading them through CSS is the solution.

In the example below I have 4 images (0.jpg - 3.jpg), and if I would now set the class '.landing-1' on my document (html), the images transition properly.

In my 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 */
}

Simple javascript to cache the images:

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);
}
于 2013-12-05T11:13:59.900 回答
0

我有同样的问题：我想使用过渡来淡化图像。使用 2 合 1 图像（或精灵）并使用 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 索引图像设置为透明，发现它的边缘出现在链接图像的外部周围。这很难看，所以我应用了 opacity: 0。

我还为“悬停”和“悬停”添加了 CSS 过渡。（基本上，应用于某个 CSS 状态的转换设置决定了它如何转换到该状态。例如，当按钮 a:hover不再适用时，应用于.button a的转换设置生效。

我希望这会有所帮助。

于 2013-05-09T05:39:10.060 回答
0

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

于 2012-10-18T00:56:09.763 回答