使用封面时的CSS3 crossfade bg图像 [英] CSS3 crossfade bg image when cover is used

问题描述

我正在尝试使用CSS3对bg图像进行动画处理/淡化。我知道这可行，但目前仅适用于Chrome：

I am trying to animate/crossfade bg image using CSS3. I know that this works, but only in Chrome for now:

.image {
    width: 100%;
    height: 100%;
    background-size: cover;
    transition: background-image .5s ease-in;
    background-image: url(../image.jpg);
}

.image:hover {
    background-image:url(../image1.jpg;
}

在Chrome浏览器中，它可以很好地实现从一个图像到另一个图像的无缝过渡，我知道我可以使用CSS3关键帧和Sprite图像为背景位置属性设置动画，但是问题是我必须使用cover属性，如果我知道我的div的确切尺寸，那么使用关键帧更改背景位置就像一个魅力一样，但是在混合中添加background-size：cover时，唯一的事情我可以说结果不是预期的。

In Chrome this works nicely, with seamless transition from one image to another. I know that I can animate background-position property using CSS3 keyframes and sprite image, but the problem is that I must use cover property. If I know exact dimensions of my holder div, then changing background position with keyframes works like a charm, but when adding background-size:cover in the mix, well, the only thing I can say that the results are not as expected.

有没有解决方法？

推荐答案

您可以在伪元素上设置第二个图像，只需更改其不透明度即可产生悬停效果

You can set the second image on a pseudo element, and just change the opacity of that to make the hover effect

.test {
    position: relative;
    width: 450px;
    height: 300px;
    background-image: url(http://placekitten.com/300/200);
    background-size: cover;
}


.test:after {
    content: "";
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-image: url(http://placekitten.com/600/400);
    background-size: cover;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    transition: opacity 1s;
    opacity: 0;
}

.test:hover:after {
    opacity: 1;
}

小提琴

顺便说一句，这也适用于跨浏览器

By the way, this works cross-browser also

这篇关于使用封面时的CSS3 crossfade bg图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！