我可以在精灵图像上叠加文字吗？

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. 您的.image-wrapper .image-options高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/

第h

Answer 3

回答＃1

你有

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

所以图标不显示。将其更改为display:block可以使用其他图像。 也许你必须设置

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

到height: 20px;为了削减你的形象，我不知道。

回答＃2

由于

，<赞>“喜欢”没有出现

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

你应该删除该行。