背景色に基づいて CSS フォントの色を反転するにはどうすればよいですか?

背景色に基づいて CSS フォントの色を反転

背景色に基づいてフォントの色の反転を実現することは、一般的なデザイン要件です。この質問では、CSS を使用してこれを実現する方法について説明します。

解決策: Mix-Blend-Mode (制限付きサポート)

mix-blend-mode CSS プロパティにより、色の混合が可能になります。基礎となる背景色に基づいて。ただし、このプロパティは Internet Explorer ではサポートされていません。

解決策: 擬似要素 (推奨)

ブラウザ間の互換性を確保するために推奨されるアプローチは、擬似要素 ( ：前後）。色付きの擬似要素をテキスト上に配置し、そのテキストの色を目的の逆数値に設定することで、目的の効果を作成できます。

.inverted-bar {
  position: relative;
}

.inverted-bar:before,
.inverted-bar:after {
  padding: 10px 0;
  text-indent: 10px;
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  content: attr(data-content);
}

.inverted-bar:before {
  background-color: aqua;
  color: red;
  width: 100%;
}

.inverted-bar:after {
  background-color: red;
  color: aqua;
  width: 20%;
}

解決策: 2 つの DIV (IE6 および IE7 サポート)

特に IE6 と IE7 のクロスブラウザー サポートを追加するには、代わりに 2 つの DIV 要素を使用できます。疑似要素。これには、2 番目の DIV を最初の DIV の上に絶対的に配置し、目的の効果を達成するためにその Z インデックス、不透明度、および背景色を設定することが含まれます。

以上が背景色に基づいて CSS フォントの色を反転するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。