fiddle

Question

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

我对CSS比较陌生，我觉得这是我无法实现的，所以我来到这里向Stackoverflow的社区寻求帮助。

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

查看结果

fiddle

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

CSS3 - 具有背景图像的交叉淡化图像

1 个答案:

fiddle