Div の背景をブラウザ間で透明にしながら、テキストの不透明度を維持するにはどうすればよいですか?

背景の透明度を調整しながらテキストの不透明度を維持する

テキストの不透明度を維持しながら div の背景を透明にするのは難しい場合があります。これは、ブラウザ間の互換性を目指す場合に特に当てはまります。

rgba ソリューション

rgba (赤、緑、青、アルファ) は、不透明度を制御する便利な方法を提供します。 。以下に例を示します:

.alpha60 {
    background-color: rgba(0, 0, 0, 0.6);
}

これにより、背景色が半透明の黒 (不透明度 60%) に設定されます。ただし、特定のブラウザに対応するには、条件付き CSS の使用が必要になる場合があります。

ブラウザの互換性の指定

IE 5.5 ～ 7 の場合:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);

IEの場合8:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";

さらに、IE の問題を回避するには、必ず明示的に背景: 透明を宣言してください。条件付きコメントまたは同様の手法を使用して、この CSS を IE のみに提供できます。

rgba とフィルターについて

rgba を使用すると、背景要素の不透明度を設定できます。ただし、IE はこのプロパティをネイティブにサポートしていません。したがって、フィルター プロパティを適用して透明効果を作成します。条件付き CSS は、IE ブラウザをサポートするように特別に調整されています。

以上がDiv の背景をブラウザ間で透明にしながら、テキストの不透明度を維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。