CSS3使用封面时交叉褪色bg图像

我正在尝试使用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关键帧和精灵图像设置背景位置属性的动画，但问题是我必须使用cover属性。如果我知道holder div的确切尺寸，那么使用关键帧更改背景位置就像是一种魅力，但是当添加背景尺寸时：混合中的覆盖，那么，我唯一能说的是结果不是预期的

---

有什么解决方法吗？

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

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

---

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

您可以制作一个JSFIDLE吗？（）是的，我也这么做了，只是没有使用伪元素，而是使用两个绝对定位的div和背景图像。