Question

我有一组div，我希望他们每个人都有不同的背景颜色，并在悬停时转换为所选网址的背景图片。到目前为止，我设法找到光滑色彩的代码 - ＆gt;图像转换，但这需要HTML中的实际img代码，我需要这些div，因为我将把文本放入其中。

是否有机会通过CSS执行从背景颜色到背景网址的平滑0.5秒或更短的过渡？

如果查看http://loopedmag.com，您可以看到我想在代码中重新创建的内容，但是使用过渡动画颜色 - >图像。

Answer 1

您无法使用CSS3过渡将background属性从纯色动画为图像。

要实现所需的行为，您需要使用纯色背景淡入/淡出图层。您可以使用伪元素来最小化该图层的标记。

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

Answer 2

这应该让你开始= FIDDLE。

您也可以使用JS，但没有必要。

CSS

.changeme {
    margin: 10px auto;
    width: 200px;
    height: 200px;
    background-color: red;
    text-align: center;
    line-height: 200px;
    color: blue;
    font-size: 30px;
}
.changeme:hover {
    background-color: transparent;
    background: url('http://i.imgur.com/DgYUsKY.jpg?1');
}
.changeme2 {
    margin: 10px auto;
    width: 200px;
    height: 200px;
    background-color: blue;
    text-align: center;
    line-height: 200px;
    color: white;
    font-size: 30px;
}
.changeme2:hover {
    background-color: transparent;
    background: url('http://i.imgur.com/BF7aTQR.jpg');
}

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

2 个答案: