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关键帧和精灵图像为背景位置属性设置动画，但问题是我必须使用封面属性。如果我知道我的持有者div的确切尺寸，那么用关键帧改变背景位置就像一个魅力，但是当添加背景大小：覆盖在混合中时，嗯，我唯一可以说结果不符合预期。< / p>

有没有解决方法呢？

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

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

使用封面时CSS3交叉淡化bg图像

1 个答案: