背景图像不适用于图像

Question

我想为我的其中一张图片制作背景图片。 背景图片是透明的，可以在http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png看到（我很确定我有正确的相对于代码中的文档的网址）和想法就是将鼠标悬停在图像上的那个，您可以看到查看站点的背景图像。 在我将背景图像移动到悬停类并将其置于图像中心之前，我想确保它可以像背景图像一样正常工作，但没有显示出来。

我的代码是

<img style="float: left; margin-bottom: 20px; background-image: url(images/view_site.png)" src="images/white_house_website.PNG" width="490" height="231" alt="White House Website">

我有问题的网站在这里，如果您一直滚动到底部，可以找到有问题的图像。 这是白宫的形象。

Answer 1

它实际上正在工作。 该图像掩盖了“Veiw Site”图像。 因为是背景。

我通过谷歌浏览器删除了顶部图片...

您想要做的是将“查看站点”图像设置为单独的 div 作为图像周围 div 的子级。 并将其设置为出现在悬停时。 类似于http://jsfiddle.net/hWcMK/

CSS：

.imagebox:hover .viewsite{
    display:block;

}

.viewsite{
    width:125px;
    height:125px;
    background-image: url("http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png");
    margin-top:-150px;
    position:absolute;
    display:none;


}

和 HTML：

<div class="imagebox">
<img src="http://webmaster.tsaprotectandserve.com/new_design/images/abc_website.PNG" width="80%"/ >
    <div class="viewsite"></div>    
</div>    

Answer 2

你可以在 jsfiddle 中查看我的工作解决方案： http : //jsfiddle.net/avi_sagi/Ea78j/3/

CSS 规则

.thumb{
    width:490px;
    height:231px;
    background:url('images/view_site.png') no-repeat center;
    background-size:100%;    
}
.thumb:hover .view_site{
    width:490px;
    height:231px;
    background:url('images/white_house_website.PNG') no-repeat center;
    background-size:128px 128px;
}

如果您的 css 在外部样式表中，请记住更改背景图片的 url 或提及绝对 url 以确保安全。

HTML

<div class="thumb">
    <div class="view_site"></div>
</div>