我们可以用CSS3动画更改背景图像吗

Question

所以我有这个

<section id="indsection">
</section>
#indsection {
width: 1024px;
background-image: url(images/indexartbg1.png);
float: left;
height: 600px;
background-position: left top;
background-repeat: no-repeat;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: rgba(51,51,51,.4);
border-right-color: rgba(51,51,51,.4);
border-bottom-color: rgba(51,51,51,.3);
border-left-color: rgba(51,51,51,.4);
-webkit-transition: all 0.5s ease-in-out 0s;
-moz-transition: all 0.5s ease-in-out 0s;
-ms-transition: all 0.5s ease-in-out 0s;
-o-transition: all 0.5s ease-in-out 0s;
transition: all 0.5s ease-in-out 0s;
}
#indsection:hover {
background-color: rgba(153,0,51,.8);
}

此部分的宽度为1024px，高度为600px。它有一个背景图像"indexartbg1"，这是一些抽象的灰色线条，图像的背景是透明的。当我将鼠标悬停在该部分上时，我希望该部分的背景颜色从"无"变为"红色"（现在什么颜色无关紧要）。我已经做到了。同时，我希望我的背景图像"indexartbg1"被替换为"indexartbg2"，这基本上是同一张图片，只是不是灰色，而是白色。重点是，我想在悬停时，新的图片（即"白色抽象线"）与新的背景颜色一起出现。我认为这将是一个很好的动画和组合。有人能帮忙吗？！非常感谢。正常截面状态：http://pokit.org/get/?303fc63fc8f14aa4787f705cbf76bb10.jpg悬停部分状态：http://pokit.org/get/?068b39e023b8d8beeed470a8ca9aae01.jpg

Answer 1

如果你想在两种状态之间平稳过渡，你可以使用不透明度和伪元素在悬停时显示其他背景图像和颜色：

演示

HTML:

<section id="indsection"></section>

CSS:

#indsection {
    position:relative;
    width: 1024px;
    background-image: url(http://fc06.deviantart.net/fs70/f/2014/237/2/9/indexartbg1_by_aortafx-d7wnc11.png);
    float: left;
    height: 600px;
    background-position: left top;
    background-repeat: no-repeat;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-top-color: rgba(51, 51, 51, .4);
    border-right-color: rgba(51, 51, 51, .4);
    border-bottom-color: rgba(51, 51, 51, .3);
    border-left-color: rgba(51, 51, 51, .4);
}
#indsection:before{
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%; height:100%;
    background-color: rgba(153, 0, 51, .8);
    background-image: url(http://fc05.deviantart.net/fs71/f/2014/237/d/a/indexartbg2_by_aortafx-d7wnc0w.png);
    opacity:0;
    -webkit-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
}
#indsection:hover:before {
    opacity:1;
}