jquery - 背景图像到背景颜色的过渡/动画

Question

目前在将悬停 CSS3 或 jQuery 过渡添加到带有背景图片的 div 时遇到问题。我希望背景图像在悬停时淡入背景颜色。

一个简单的背景图像到背景颜色悬停的非常基本的例子

.div1 {
    background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg");
    background-size:cover;
    height:200px;
    width:600px;
}

.div1:hover {
    background:red;
}

现在这可以按照您的预期工作，但是我怎样才能使背景图像淡入背景颜色呢？

我尝试向悬停添加一个简单的 CSS3 过渡，但这不起作用，如本 jsFiddle 所示.

Answer 1

您不能将背景图像动画化/转换为颜色，但您可以通过将图像应用于覆盖在您的 div 上的伪元素并在悬停时动画化其不透明度来伪造效果。好处是它会在 in 和 out 之间进行动画处理。

Demo Fiddle

您可以使用以下 CSS 执行此操作:

.div1 {    
    height:200px;
    width:600px;
    position:relative;
    background:red;
}
.div1:after{
    position:absolute;
    width:100%;
    height:100%;
    content:'';
    background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg");
    background-size:cover;
    opacity:1;
    transition: 3s;
}

.div1:hover:after {
    opacity:0;    
}