0

这真的是一个两部分的问题。我正在努力解决两个我无法弄清楚的问题。

问题 #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。为什么我的文字没有

像

出现？我试图将它显示在精灵图像上方的中心。

有什么想法我可能做错了吗？

4

3 回答 3

1

  1. 你.image-wrapper .image-options很高40px- 所以它会显示整个精灵。要仅显示一半，您必须将其高度更改为20px

  2. 你.image-options .likeButton有一个text-indent: -9999px- 这Like就是隐藏文本的原因

于 2012-08-10T01:10:15.827 回答
0

与其直接使用图像标签，不如使用该背景图像设置父超链接？

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

于 2012-08-10T01:09:16.467 回答
0

答案#1

你有

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

所以图标没有显示。将其更改为display:block适用于我的另一个图像。也许你必须设置

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

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

答案#2

“喜欢”没有出现是因为

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

你应该删除那条线。

于 2012-08-10T01:13:15.383 回答