0

私はウェブチュートリアルのどこかで、cssのホバー効果に使用できる画像は1つだけであると読んでいました。たとえば この画像だけをCSSで入力する必要があります

CSS画像

したがって、Facebookアイコンにカーソルを合わせていない場合は、鈍い灰色のアイコンが表示されますが、誰かがアイコンにカーソルを合わせると、青いアイコンが表示されます。この目的のために、CSSで使用する画像ファイルは1つだけです。

どうすればそれができますか。また、このような画像は何と呼ばれているのでしょうか？

4

3 に答える 3

2

それらはスプライトと呼ばれます

それらはあなたが完全に異なって見えることができる複数の要素のために1つの画像を使用することを可能にします

公式ドキュメント

ここで必要なことを行うための簡単な例を作成しました

<div></div>

div {
  background: url('http://i45.tinypic.com/2jee9zo.png');
  background-position: -10px -15px;
  height: 70px;
  width: 70px;
}

div:hover {
  background-position: -10px 83px;
}
于 2012-11-27T14:08:04.057 に答える
0

CSSスプライトを使用できます。これは便利なツールです： http： //es.spritegen.website-performance.org/

さらに読む：http ：//www.w3schools.com/css/css_image_sprites.asp

于 2012-11-27T14:02:35.657 に答える
0

編集：それはspirteと呼ばれます（申し訳ありませんがこれを追加しました、これがどのように命名されたのかあなたの最初の質問をawnserするのを忘れたので）

これを行うには、下の私の作業の例のように背景画像を配置します

これはCSSです、ところで

input#searchSubmit          { height: 34px; width: 36px; background: url('../images/searchSubmit.png') no-repeat; margin: 8px 8px 0 4px; cursor: pointer; border: none; }
input#searchSubmit:hover    { background-position: 0px -34px; }

ご覧のとおり、searchSubmitにカーソルを合わせると、ボタンに貼り付けられた画像の背景位置が変更され、黒と赤の検索アイコンの代わりに赤と白の検索アイコンが表示されます。

サイトはここにあるので、実際に動作しているのを見ることができます。私のアクションボタンはすべてこのように作られています。 これが実際に動作していることを確認するには、ここをクリックしてください

于 2012-11-27T14:07:57.053 に答える