13

わかりました...ここで問題です。

水平方向に配置された 10 個の 25px x 25px アイコンで構成される CSS スプライト イメージがあるため、幅 250px のスプライト イメージになります。

これらの 25x25 の画像をサムネイルとして使用しています。初期ビューでこれらの画像の不透明度を 30% にしたいと考えています。ユーザーがそれらの上にカーソルを置いたとき、不透明度は 100% である必要があります (1)。

私がしたことは、不透明度が 30% の画像の 2 行目を作成することでした。これで、250px x 50px のスプライト画像ができました。上部 25px は 100%、下部 25px は 30% です。

HTML を次のように設定します。

<a href="largeimage1.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
<a href="largeimage2.jpg" class="thumb1"></a>
etc...

そしてCSS：

a { display: block; float: left; width: 25px; height: 25px; background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat; }
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
a:hover { **background-position-y**: -25px; }

ただし、これは残念ながら機能していないようです。background-position-y は Firefox ではサポートされていないためです (または標準ではなく、IE 固有のものです)。

アイデアは、スプライト画像を上に (y 軸に沿って) SHIFT し、x 軸をそのままにしておく (または前のクラスで設定した) ことです。

これに対する単純な CSS ソリューションがない場合、この不透明効果は JQUERY で実行できますか? では、親指は 30% の不透明度で読み込まれ、ユーザーがホバーすると 100% の不透明度に移行しますか?

どうもありがとう、

M.

4

5 に答える 5

12

目的の効果を実現するために、2 つ目のアイコン セットや JavaScript を使用する必要はありません。

Lou が指摘したopacityように、アイコンを 30% または完全に表示するために使用します。もういじる必要はありませbackground-positionん。

次のようにスタイルを定義してください。

a {
    opacity:0.3;  /* for standard browsers */
    filter: alpha(opacity = 30);  /* for IE */

    display: block;
    float: left;
    width: 25px;
    height: 25px;
    background: url("250_x_50_spriteimage.jpg") 0 -25px no-repeat;
}

a:hover {
    opacity:1.0
    filter: alpha(opacity = 100);
}

.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }

CSS コードの検証が心配な場合は、IE 固有の部分 (検証されません) を取得し、条件付きコメントを介して特定のターゲット CSS ファイルに配置します。

それが役立つことを願っています。

于 2009-05-20T11:16:28.020 に答える
3

簡単な方法

{background-position:100% 4px;}

ピクセル付きの親子関係を使用して、background-position-yプロパティを置き換えることができます

于 2010-12-03T11:32:12.697 に答える
3

Louの答えは、あなたがやりたいことをしていると思います-各状態のクラスを定義し、x座標とy座標の両方を設定するだけです。

フェードの効果が必要な場合は、jQuery を使用してそれを行う方法を提供します。その場合、これはおそらくあなたが望むものを得ることができます:

$(".thumb").css("opacity", 0.33);
$(".thumb").hover(
    function() {
        $(this).fadeTo(300, 1.0);
    },
    function() {
        $(this).fadeTo(1, 0.33);
    }
);

編集：フィードバックに基づいて更新されました。初期不透明度が設定されました。

于 2009-05-04T01:36:26.080 に答える
1

注: これを Mozilla で機能させるには、background-attachment プロパティを「fixed」に設定する必要があります。

それは関係がありますか？

--

画像は 10 個しかありません。それぞれに css クラスを定義するだけです。そうすれば、相対 x 座標を指定できます。

ps。そのスタイルを a:hover に適用すると、ページ上のすべてのリンクに適用されます。イメージされたスタイルのみに適用する必要があります。

a { display: block;
    float: left;
    width: 25px;
    height: 25px; 
    background: url("test.jpg") 0 -25px no-repeat;
  }
.thumb1 { background-position: 0 0; }
.thumb2 { background-position: -25px 0; }
.thumb3 { background-position: -50px 0; }
.thumb1:hover { background-position: 0 -25px; }
.thumb2:hover { background-position: -25px -25px; }
.thumb3:hover { background-position: -50px -25px; }

不透明度もあります..

于 2009-05-03T20:58:48.603 に答える