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

Question

我正在尝试使用 CSS3 动画/交叉淡化背景图像。我知道这可行，但目前仅在 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 关键帧和精灵图像为背景位置属性设置动画，但问题是我必须使用封面属性。如果我知道我的持有人 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

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