对背景颜色转折/动画的背景图象

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上的伪元素并在悬停时设置其不透明度来伪造效果.好处被它都将动画中和了.

演示小提琴

您可以使用以下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;    
}