0

これは実際には2 つの部分からなる質問です。私は理解できない2つの問題に苦しんでいます。

質問＃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には a がありますtext-indent: -9999px- そのため、Likeテキストは非表示になっています

于 2012-08-10T01:10:15.827 に答える
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 に答える
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/

h番目。

于 2012-08-10T01:09:16.467 に答える