배경 이미지가 작동하지 않습니다.

Question

내 이미지 중 하나의 배경 이미지를 만들고 싶습니다. 배경 이미지는 투명하며 http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png에서 볼 수 있습니다 (코드의 문서와 관련하여 올바른 URL을 사용하고 있음을 확신합니다). 아이디어는 이미지 위로 마우스를 가져 가면 볼 수 있습니다. 배경 이미지. 호버 클래스로 배경 이미지를 이동하고 이미지의 가운데에 배치하기 전에 배경 이미지처럼 제대로 작동하는지 확인하고 싶지만 표시되지 않습니다.

내 코드는 문제에

<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

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

Answer 2

실제로 작동합니다. 이미지가 "Veiw Site"이미지를 은폐하고 있습니다. 배경이기 때문에.

은 내가 ... 구글 크롬을 통해 상단 이미지를 제거 이미지 주위 사업부의 자식으로 별도의 사업부로 "보기 사이트"이미지를 설정 싶은

. 을 입력하고 마우스를 올리면 나타납니다. 같은 뭔가 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>