背景颜色和背景图像 CSS3 之间的过渡

transition between background color and background image CSS3(背景颜色和背景图像 CSS3 之间的过渡)

问题描述

I've got a set of divs and I want each of them to have different background color and while on hover to transition into a background image of chosen url. I have so far managed to find code for smooth color -> image transition but that requires an actual img code in HTML and I need those divs as I will be putting text in them.

Is there any chance to have a smooth 0.5s or less transition from background color to background url performed through CSS?

If you look at http://loopedmag.com you can see what I want to recreate in code but with the transitioned animation color->image.

You can't animate the background property from solid color to image with CSS3 transitions.

To achieve the desired behaviour, you will need to fade in/out a layer with your solid background color. You may use a pseudo element to minimize markup for that layer.

DEMO

HTML :

<div class="one"></div>
<div class="two"></div>

CSS :

body,html{
    height:100%;
}

div{
    height:50%;
    width:50%;
    position:relative;
    background-size:cover;
}
.one{
    background: url(http://lorempixel.com/output/fashion-q-c-640-480-3.jpg);
}
.two{
    background: url(http://lorempixel.com/output/people-q-g-640-480-7.jpg);
}
div:after{
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%;
    height:100%;
    background:gold;
    opacity:1;

    -webkit-transition: opacity .5s;
    transition: opacity .5s;
}
div:hover:after{
    opacity:0;
}

这篇关于背景颜色和背景图像 CSS3 之间的过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！