背景图像不适用于图像

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

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

Answer 1

实际上是在工作。图像掩盖了＆＃34; Veiw网站＆＃34;图片。 因为它的背景。

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

您要做的是设置＆＃34;查看网站＆＃34;图像作为单独的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位于外部样式表中，请记住更改背景图片的网址或提及绝对网址是安全的。

HTML

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