css - CSS3 - 带有背景图像的交叉淡入淡出图像

Question

是否可以使这些六边形的每个单独的背景图像交叉淡入另一张图片（例如：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>      

谢谢！

• 约翰

Answer 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>

查看结果

小提琴

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