【问题标题】：CSS3 - Cross fading images with background-imageCSS3 - 带有背景图像的交叉淡入淡出图像
【发布时间】：2013-05-22 23:48:07
【问题描述】：

是否可以让这些六边形的每个单独的背景图像交叉淡入另一张图片（例如：http://css3.bradshawenterprises.com/cfimg/）。

我对 CSS 比较陌生，我觉得这超出了我的能力范围，所以我来这里向 Stackoverflow 的优秀社区寻求帮助。

http://jsfiddle.net/kGSCA/128/

<div class="container">

        <div class="hex" style="background-image: url(http://css3.bradshawenterprises.com/images/Turtle.jpg);">     
        <a href="#"></a>        
        <div class="corner-1"></div>
        <div class="corner-2"></div>        
    </div>

            <div class="hex" style="background-image: url(http://css3.bradshawenterprises.com/images/Turtle.jpg);">     
        <a href="#"></a>        
        <div class="corner-1"></div>
        <div class="corner-2"></div>        
    </div>

谢谢！

约翰

【问题讨论】：

标签： css background-image gradient fade

【解决方案1】：

只需从内联样式中删除您的背景图像并将其放入 CSS 中。

.hex {
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
   background-image: url(http://css3.bradshawenterprises.com/images/Turtle.jpg);
}
.hex:hover {
    background-image: url(http://placekitten.com/450/300);
}

您的 html 保持这种方式：

<div class="hex">       
    <a href="#"></a>        
    <div class="corner-1"></div>
    <div class="corner-2"></div>        
</div>

查看结果

fiddle

当然，如果你想要不同的图片，你需要为元素设置一个id，并相应地分配图片

【讨论】：