html - 我们可以用 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);
}

此部分宽度为 1024 像素，高度为 600 像素。它有一个背景图片“indexartbg1”，是一些抽象的灰色线条，图片的背景是透明的。 我希望，当我将鼠标悬停在该部分上时，该部分的背景颜色从“无”变为“红色”(现在什么颜色无关紧要)。我已经做到了。同时我希望我的背景图片“indexartbg1”被替换为“indexartbg2”，这基本上是相同的图片，只是颜色不是灰色，而是白色。关键是，我希望在悬停时新图片以新的背景颜色启动(即“白色抽象线”)。我认为它会成为一个不错的动画和组合。任何人都可以帮忙？! 谢谢。 正常段状态:http://pokit.org/get/?303fc63fc8f14aa4787f705cbf76bb10.jpg 悬停部分状态:http://pokit.org/get/?068b39e023b8d8beeed470a8ca9aae01.jpg

Answer 1

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

DEMO

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