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

所以我有这个

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

该部分宽度为1024像素，高度为600像素。它有一个背景图像索引RTBG1，它是一些灰色的抽象线，图像的背景是透明的。 我想，当我悬停在那个区域上时，该区域的背景颜色，从无变为红色，现在什么颜色无关紧要。我已经做到了。同时，我希望我的背景图像indexartbg1被indexartbg2取代，它基本上是相同的图片，只是不是灰色，而是白色。重点是，我想在新图片的悬停上，用新的背景色画出白色的抽象线。我认为这将是一个很好的动画和组合。谁能帮忙？！ 非常感谢。 正常断面状态：

---

悬停部分状态：

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

HTML:

---

虽然我不认为这在CSS3的背景图像中是可能的，但您可能可以使用不透明度来实现类似的效果。实际上，我现在刚刚添加到indsection：hover Background image的属性：urlmages/indexartbg2.png；它是有效的。现在需要再次查看所有内容。谢谢。@ncubica css转换受IE10+支持。对于较旧的浏览器，没有转换，更改会很突然，但不会崩溃。来，伙计们。我想我明白了。我不知道这是不是正确的方法？！我认为你是对的，但在9点之前不要使用它。原因IE8没有正确支持使用polyfill的伪元素course@web-tiki我的方法只是添加背景图像：属性工作正常吗？我刚用Chrome测试过，不够流畅，或者我有个人电脑problems@web-是的。我刚刚完成了修改。现在天气很好。谢谢你，伙计。你是救世主！！！！！

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

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