ブラウザ間でテキストの不透明度に影響を与えずに透明な背景を作成するにはどうすればよいですか?

クロスブラウザーでテキストの不透明度に影響を与えずに背景の透明性を実現する方法

Web 開発では、特定の div 要素を次のように設定する必要がある場合があります。要素内のテキストの不透明度を維持しながら、背景を透明にします。これは、CSS プロパティとフィルター効果の組み合わせによって実現できます。

rgba を使用したクロスブラウザー ソリューション

rgba は、赤、緑、青、アルファを表します。ここで、アルファは透明度を表します。 rgba を使用して背景の透明度を実現する方法は次のとおりです。

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

この例では、rgba(0, 0, 0, 0.6) は背景色を 60% の透明度の黒に設定します。

Internet Explorer 6 および 7 のフォールバック

Internet Explorer 6および 7 は rgba をサポートしません。これらのブラウザに対応するには、次のフィルタ プロパティを使用できます。

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

IE に関する追加の考慮事項

Internet Explorer では、background:parent to も宣言する必要があります。背景が透明であることを確認してください。これは、条件付きコメントまたは同様の方法で実現できます。

使用例

<div class="alpha60">
    <h1>Hello World</h1>
</div>

外部参照

詳細詳細については、次の外部情報を参照してください。リソース:

• http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

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