使用封面时的 CSS3 淡入淡出背景图像

Question

我正在尝试使用 CSS3 对 bg 图像进行动画处理/淡入淡出。我知道这行得通，但目前只能在 Chrome 中使用:

.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 图像为 background-position 属性设置动画，但问题是我必须使用 cover 属性。如果我知道我的 holder div 的确切尺寸，那么使用关键帧更改背景位置就像一个魅力，但在混合中添加 background-size:cover 时，好吧，我唯一可以说的是结果不符合预期。

有什么解决方法吗？

Answer 1

你可以在伪元素上设置第二张图片，改变它的不透明度来制作悬停效果

.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;
}

fiddle

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