背景图像到背景颜色过渡/动画答案

【问题标题】：Background image to background colour transition/animation背景图像到背景颜色过渡/动画
【发布时间】：2014-08-04 11:00:05
【问题描述】：

目前在将悬停 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 所示。

【问题讨论】：

标签： jquery html css

【解决方案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;    
}

【讨论】：

有没有办法用图片上的文字来做到这一点？文字似乎干扰了它？

【解决方案2】：

添加一个像这样改变背景的内部 div：

.inner {
    height:100%;
    width:100%;
}

.div1:hover .inner {
    background:red;
    transition: 3s;
}

JSFiddle

【讨论】：

取消悬停某个项目后是否可以淡出？

【解决方案3】：

css 关键帧动画 没有悬停的平滑示例

示例Keyframe animation Background red fade

html

 <div class="div1">
    <div class="overlay"></div>
</div>

css

.div1 {
        background:url("http://lorempixel.com/output/business-q-c-640-480-10.jpg");
        background-size:cover;
        height:200px;
        width:600px;
        position:relative;
    }
    .overlay {
        position:absolute;
        width:100%;
        height:100%;
        background:rgba(255, 10, 10, 0);
        -webkit-animation-name: fade;
        -webkit-animation-duration: 10s;
        -webkit-animation-delay: 1s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-play-state: running;
        -webkit-animation-direction: alternate;
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        /* Standard syntax */
        animation-name: fade;
        animation-duration: 10s;
        animation-delay: 1s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        animation-play-state: running;
        animation-direction: alternate;
    }
    /* Chrome, Safari, Opera */
     @-webkit-keyframes fade {
        0% {
            background:rgba(255, 10, 10, 0);
        }
        100% {
            background:rgba(255, 10, 10, 1);
        }
    }
    /* Standard syntax */
     @keyframes fade {
        0% {
            background:rgba(255, 10, 10, 0);
        }
        100% {
            background:rgba(255, 10, 10, 1);
        }
    }
    }

【讨论】：