CSS を使用して、マウスを上に置いたときに画像をグレーにする方法

画像の上にマウスを移動すると、画像が灰色または暗くなります。これは実際には、画像が CSS によって半透明スタイルに設定されているためです。この効果がどのように実現されるかを確認するための例を示します

a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8;}

この CSS コードは、マウスを A

ハイパーリンク に移動するように設定し、ハイパーリンク内の画像 (img) が半透明の表示になるようにします。効果は80％。

説明:

フィルターはプラットフォーム IE の半透明効果スタイルを設定します。値は 1 ～ 100 で、値が小さいほど透明度が高くなります。IE8 より前に透明度を設定するには、

不透明度を使用して IE 半透明効果を設定します。スタイル、値は 0.1 ～ 1 で、値が小さいほど透明になります。IE8 以降のバージョンの透明な使用を設定します。

-moz-opacity Firefox などの

IE 以外のブラウザ設定の場合、構文は同じですIE

この設定 CSS スタイルの不透明度とフィルターは、IE6 ではサポートされていません。現在、IE6 のバージョン シェアが急激に低下しているため、IE6 によるこの CSS のサポートは一般に考慮されていません。

マウスを動かすと画像の色が変わり、画像が半透明になります。

サンプルケースの説明: 2 つの DIV ボックスを設定し、それぞれのボックスに画像を配置し、マウスがホバー (:hover) するように設定します。画像は 80% と 70% 透明になります。その効果を観察してください。

1. 主要な CSS コード

.p1,.p2{ width:500px; margin:20px auto} 
.p1 a:hover img{filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8} 
.p2 a:hover img{filter:alpha(Opacity=70);-moz-opacity:0.7;opacity: 0.7}

これは、DIV

オブジェクトボックス内のハイパーリンク内の画像のホバー疑似クラスの半透明効果です。

2. 重要な HTML コード

<p>鼠标移动到图片悬停时，图片变色滤镜效果：</p> 
<p class="p1"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/p-a-bg.png"  class="lazy"   / alt="CSS を使用して、マウスを上に置いたときに画像をグレーにする方法" ></a></p> 
<p class="p2"><a href="#"><img  src="/static/imghwm/default1.png"  data-src="images/an.gif"  class="lazy"   / alt="CSS を使用して、マウスを上に置いたときに画像をグレーにする方法" ></a></p>

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

ネイティブjsを整理する一般的な方法

Vue+CSS3を使ってインタラクティブなエフェクトを作成する方法

フロントエンドのレスポンシブレイアウト、レスポンシブ画像、自作の詳細説明グリッドシステム

以上がCSS を使用して、マウスを上に置いたときに画像をグレーにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。