ホームページ > 記事 > ウェブフロントエンド > CSS_html/css_WEB-ITnose で画像のグレーと元の色を切り替える方法
CSS_html/css_WEB-ITnose で画像のグレーと元の色を切り替える方法
- WBOYオリジナル
- 2016-06-24 11:31:381642ブラウズ
CSS を使用して画像のグレーと原色を切り替える方法:
推奨事項: コードをできるだけ手書きすることで、学習の効率と深さを効果的に向上させることができます。
一部の Web サイトには、より豪華な効果があり、画像上にマウスを置くと、画像がグレーと元の色の間で切り替わります。この効果を実現する方法について簡単に紹介します。
コード例:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css"> a img{ border:0px; filter:gray; } a:hover img{ border:0px; filter: } </style> </head> <body> <a href="#"><img src="mytest/demo/yinying.jpg"></a> </body> </html> 上記のコードは非常に単純で、フィルター属性コレクションとハイパーリンク疑似クラスとともに実装されています。残念ながら、filter 属性は IE ブラウザでのみサポートされています。
元のアドレスは次のとおりです: http://www.softwhy.com/forum.php?mod=viewthread&tid=4691
詳細については、以下を参照してください: http://www.softwhy.com/divcss/
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。