ie7、8、9、10、FF、クロームマスク表示に対応

画像上にマスクとボタンのレイヤーがあることに気づきたいのですが、マウスを動かすと、マスクの色が暗くなり、ボタンの画像が変化します。質問で述べたように、最終的に互換性のあるソリューションを思いつきました。

マスクレイヤー、ボタン、画像を同じdivに配置します。絶対位置追従機能に従って、マスクレイヤーとボタンを画像の前に配置します。スペースを占有しません。マスクレイヤーの色と透明度を設定します。色と透明度はマスクレイヤー全体とそのサブ要素の透明度に設定されるため、マスクレイヤーにボタン画像を配置するとボタン画像も透明になります。希望する視覚効果が得られないため、マスク レイヤーとボタン アイコンをフラットに設定します。

ただし、IE7 および 8 では、background-color の rgba はマスク レイヤーの効果を表示できないため、赤ボックス内の色と透明度の書き方を変更する必要があります:

、背景は黒に設定され、不透明度は透明度を設定し、フィルターは IE フィルターです (IE と互換性を持たせ、透明度を表示するため)

これにより、タイトルに記載されている各ブラウザで一貫した視覚効果が実現されます。