CSS マウスをクリックして画像の透明度を変更_html/css_WEB-ITnose

今日のフロントエンド コード テーマの共有: jequery は CSS 画像の透明度を制御します

多くの場合、Web サイトの画像処理では、画像の色 (グレーなど) を変更するなど、いくつかの補助効果を実装する必要があります。画像上でマウスをスライドさせるか、クリックします)。実際、簡単な方法は、画像の CSS 透明度属性を変更することです。

どうやって変更しますか? 1 つは純粋な CSS で、もう 1 つは jquery または JavaScript コードによって制御されます。最初の例では :hover 疑似クラス セレクター を使用し、この例では 2 番目のセレクターを使用します。

最初に最終的な効果を見てみましょう:


ステップ 1: 写真を配置します

.jpg />

ここで、各ピクチャは最初にデフォルトでクラスセレクター imgopacity を設定します (デフォルトのピクチャは選択されておらず、表示されます)ライトグレー)


ステップ 2: 画像

CSS スタイルを次のように設定します:
.5; -khtml-opacity: 1 画像の透明度属性値、値の範囲: 0 ～ 1、値が大きいほど、画像がきれいであればあるほどクリアです

この時点での効果は次のとおりです:




ステップ 3: ワンクリックで画像の透明度を制御する jquery コードを作成します


マウスが画像をクリックすると、画像が次のようになります。正常に表示され、他の画像は薄い灰色になります。

デフォルトの画像には明るい灰色を表すクラスセレクタ imgopacity があるため、マウスをクリックしてクラスを削除すると、画像が正常に表示されます。 コードは次のとおりです。

$(function () {
) img").click(function () {
img").

最後に 効果は以下の通りです:


これで今日の共有は終了です。読んでいただきありがとうございます。別の日に共有します。アドバイスをお願いします。 。
この例の完全なソース コード: