0

ホームページに2つのニュースがあるサイトがあります。どちらも同じ画像なので、クリックして詳細を読むことができます。だからすべての標準的なもの。今、私は問題を抱えています。2つの画像は、前述のように、同じスプライトであり、別の記事の下に立っているために分離されています。これも論理的です。ここで、両方の画像に同じ効果を作成したいと思います。両方がホバリングした場合、それらは別のスプライトに変更する必要がありますが、これは現在は発生しません。一方のスプライトでは、適切に配置されています（したがって、色が変化しているように見えます。技術者は、それが画像であることを理解できません）が、もう一方のスプライトでは、ホバーされたスプライトが[続きを読む]ボタンの上に配置されます。 。

これら2つを均等にして、続きを読む画像の上または下に配置されないようにするにはどうすればよいですか？

CSS：

.home article {
    background: url("images/readmore.png") no-repeat scroll left 250px transparent;
    float: left;
    padding: 15px 15px 45px;
    width: 300px;
}

.home article .readmore:hover {
    background: url("images/icon-readmore-sprite.png") no-repeat scroll 5px 3px transparent;
}

HTML：

<article>
    <div class="entry-content">
    <a rel="bookmark" title="..." href="....">
    <p>......</p>
    <span class="readmore" title="read">read further</span>
    </a>
    </div>
</article>

PS：私がこれを行う場合：

.home article:hover {
    background: url("images/icon-readmore-sprite.png") no-repeat scroll 5px 3px transparent;
background-position: 340px 250px;
}

そうすれば正しく配置されますが、ホバーするとクリックされたように見えます。ボタンをクリックしたように、左下に移動します...

4

2 に答える 2

1

CSS スプライト メソッドの基本を理解する必要があります。

この例に従う必要があります

http://www.24development.cz/examples/css-sprites/sprite.html

ソースを表示し、画像データに合わせて画像スプライトの位置をずらしてください。

これにより、すべての画像をプリロードする際の問題を回避することもできます。

これがうまくいくかどうか教えてください。

于 2012-10-09T11:35:56.970 に答える
0

私が見る限り、これで十分です。小さな 32x32 の画像 (または任意のサイズ) を使用し、右下に配置します。

article a {
    display: block;
    background: grey url('small.png') bottom right no-repeat;
}

article a:hover {
    background: red url('small-hover.png') bottom right no-repeat;
}
于 2012-10-09T11:48:10.103 に答える