CSS画像フィルタ

1729 ワード

http://hi1980.com/2009/03/21/img-css-filter.html
 
  a img { 2 filter:alpha(opacity=80);/*CSS */3 opacity:0.8;/* Mozilla CSS */4} 5a:hover img { 6 filter:alpha(opacity=100);/*CSS */7 opacity:1;/* Mozilla CSS */8} 
 
 
三番目
21
CSSの画像フィルタ
著者:wulinfo、ジャンル:社会大学、評論:11条コメント
画像にフィルタを追加すると、マウスがリンクされた画像を通過したときに、マウスのイベントをトリガして、画像の透明度を変更します。
通常、リンクされた画像を処理します。マウスを使って色を変えて表現するのが一般的ですが、今日はCSSフィルタを使います。効果は以下の通りです。
マウスを使って画像を見てもいいです。効果は80%から10%の透明度です。
試してみたら、よく見られた枠より色が変わっているという感じがしますか?写真の透明度を変えることで、この写真はリンクが含まれています。もちろん好きなら逆にしてもいいです。a[img]のためにフィルターを追加すればいいです。
マウスを使って画像を見てもいいです。効果は100%-80%透明度です。
このような効果を実現するのは非常に簡単です。コードは2行だけで実現できます。コードは以下の通りです。1a img { 2 filter:alpha(opacity=80);/*CSS */3 opacity:0.8;/* Mozilla CSS */4} 5a:hover img { 6 filter:alpha(opacity=100);/*CSS */7 opacity:1;/* Mozilla CSS */8}