스프라이트 이미지에 텍스트를 오버레이 할 수 있습니까?

Question

이것은 실제로 두 부분으로 된 질문입니다. 나는 알아 내지 못하는 두 가지 문제로 고심하고있다.

질문 1. 스프라이트 이미지가 두 이미지를 모두 표시하는 이유는 무엇입니까? 나는 맨 아래를 보여줄 것을 기대하고 그 위에 마우스를 보여 주면 위의 것을 보여줄 것이다. 표시되는 스크린 샷을 게시했습니다. 아래는 내가 사용하고있는 HTML과 CSS 스타일입니다. 스프라이트 이미지는 50x40입니다.

HTML

<li> 
    <div class="image-wrapper"> 
     <div class="image-options"> 
      <a href="#" class="likeButton" title="Like image"><span>Like</span></a> 
     </div> 
     <a href="/view_profile.php?id=5693"> 
      <img src="photos/files/5693/grid/e1cd6ee3042f35dc7a538a5e516507e3.jpeg" /> 
     </a> 
    </div> 
</li> 

CSS :

.image-wrapper { 
position : relative; 
display : inline-block; 
} 

image-wrapper img { 
position : relative; 
} 

.image-wrapper .image-options { 
position : absolute; 
top  : 0; 
right : 0; 
left  : 0; 
height : 40px; 
z-index : 2; 
display : none; 
background : #eeeeee; 

zoom: 1; 
filter: alpha(opacity=90); 
opacity: 0.9; 
} 

.image-options .likeButton { 
display: block; 
width: 50px; 
height: 40px; 
border-right: 1px solid #dedede; 
background: url('/bootstrap/img/like.png') bottom; 
text-indent: -99999px; 
} 

.likeButton:hover { 
background-position: 0 0; 
} 

질문 # 2. 왜 내 텍스트 게재

처럼

하지? 스프라이트 이미지 위에 가운데에 표시하려고합니다.

어떤 생각을 잘못했을 수 있습니까?

Answer 1

1. 높은 40px입니다. 당신이 20px

2. 에 높이를 변경해야 할 경우에만 절반을 표시하도록 .image-options .likeButton는 text-indent: -9999px있다 - Like 텍스트가 숨겨져있는 이유입니다

Answer 2

이미지 태그를 직접 사용하는 대신 해당 배경 이미지로 부모 하이퍼 링크를 설정하지 않는 이유는 무엇입니까?

<a href="#" class="likeButton" title="Like image">Like</a> 
<a href="/view_profile.php?id=5693" class="somethingelse"> 
    <br/> 
</a> 


.likeButton{ 
    display: block; 
    width: 200px; 
    height: 20px; 
    background-image: url('http://i.stack.imgur.com/xANmb.png'); 
    text-align: center; 
    verticle-align: middle; 
    background-repeat: no-repeat; 
    background-color: grey; 
} 
.likeButton:hover{ 
    background-position: 0px -20px 
} 
.somethingelse{ 
    display: block; 
    width: 200px; 
    height: 40px; 
    background-image: url('http://i.stack.imgur.com/lAKId.jpg'); 
    text-align: center; 
    verticle-align: middle; 
    background-repeat: no-repeat; 
    background-position: -10px -60px; 
    /*background-size: 45px 45px;*/ 
} 

모든 텍스트는 모든 이미지에서 아무 곳이나 이동할 수 있습니다. 배경 이미지의 크기와 위치도 설정할 수 있습니다. http://jsfiddle.net/webwarrior/wtKzc/23/

HTH :

나는 놀 예를 추가했습니다. 그것은 전체 스프라이트를 표시합니다 - 그래서 당신의 .image-wrapper .image-options

Answer 3

대답 # 1

당신은

이

.image-wrapper .image-options { 
    display : none; 
} 

아이콘이 표시되지 않습니다. 엔. display:block으로 변경하면 다른 이미지로 전환됩니다. 어쩌면 당신은 당신의 이미지를 차단하기 위해 height: 20px;에

.image-options .likeButton { 
    height: 40px; 
} 

을 설정해야, 나도 몰라.

.image-options .likeButton { 
    text-indent: -99999px; 
} 

의 해당 줄을 제거해야하기 때문에

대답 # 2

"좋아요"표시되지 않습니다.