テキストに影響を与えない背景色の不透明度

Web 開発の世界では、多くの場合、視覚的な魅力を高めるために透明性を達成することが不可欠です。ウェブサイト要素の機能。一般的な要件の 1 つは、囲まれたテキストの不透明度を維持しながら、div の背景に透明度を適用することです。これは、特にブラウザ間の互換性を確保する際に課題となる可能性があります。

rgba ソリューション

最も効果的で広くサポートされているソリューションは、「RGBA」(赤、緑、青、アルファ）プロパティ。以下に例を示します:

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

「rgba」プロパティは、背景色とそのアルファ チャネルまたは透明度を指定します。この場合、背景は不透明度 60% の黒に設定されています。このアプローチは、ほとんどの最新のブラウザで機能します。

IE フォールバック

古いバージョンの Internet Explorer を含むブラウザ間の互換性を実現するには、追加の CSS ルールが必要です。

.alpha60 {
  background-color: rgb(0, 0, 0);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

「rgb」プロパティは IE のフォールバック背景色を設定し、「filter」プロパティと「-ms-filter」プロパティはそれぞれバージョン 5.5 ～ 7 と 8 で透明度を適用します。

IE ブラウザに関する注意

透明性を確保するには、「background:parents」を宣言することが必須ですIE の CSS フォールバック内。これにより、アルファ チャネルのサポートが利用できない場合でも、背景色が透明のままになります。