背景颜色和背景图像CSS3之间的过渡 [英] transition between background color and background image CSS3
问题描述
我有一组div,我希望每个div具有不同的背景颜色,并且在悬停时过渡到所选url的背景图像.到目前为止,我已经设法找到用于平滑颜色的代码->图像过渡,但是这需要HTML中的实际img代码,并且我需要这些div,因为我将在其中添加文本.
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.
是否有可能通过CSS从背景颜色平滑转换到背景url的时间不超过0.5秒?
Is there any chance to have a smooth 0.5s or less transition from background color to background url performed through CSS?
如果您查看 http://loopedmag.com ,您会看到我想在代码中重新创建的内容,但是过渡的动画颜色->图片.
If you look at http://loopedmag.com you can see what I want to recreate in code but with the transitioned animation color->image.
推荐答案
您无法为 background
属性设置纯色,并使用CSS3过渡为图像设置动画.
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之间的过渡的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!