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

Answer 2

添加一个更改背景的内部div：

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

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

JSFiddle

Answer 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);
        }
    }
    }

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

3 个答案:

Demo Fiddle