html - 如何使用 CSS 在图像之间交叉淡入淡出？

Question

我完全按照教程进行操作，而不是从 Print_tab.png 褪色到 Print_tab_hover.png，它只是褪色为白色。有什么办法可以解决这个问题（不使用 javascript）？

这是我使用的代码：

HTML：

    <div id="print"
     <img class="bottom" src="images/print_tab_hover.png"  />
     <img class="top" src="images/print_tab.png"  />
    </div>

CSS：

    #print {
    position:relative;
    width: 300px;
    height: 169px;
    margin: 0 auto;
    }

    #print img {
    position: absolute;
    left: 0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out;
    }

    #print img.top:hover {
    opacity: 0;
    }

Answer 1

这有效：

#print {
    position:relative;
    width: 200px;
    height: 120px;
    margin: 0 auto;
    background-image: url(http://fc06.deviantart.net/images2/i/2004/07/e/7/Firefox_dock_icon.png);
}

#print img {
    position: absolute;
    left: 0;
    width: 200px;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    -ms-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out;
}

#print img.top:hover {
    opacity: 0;
}

<div id="print">
   <img class="top" src="http://lanscaping-ideas.com/wp-content/uploads/2012/04/Landscape-Paintings-2.jpg"  />
</div>

只需为#print 设置默认背景并淡入新图像，反之亦然。