CSS でテキスト オーバーレイの動的な不透明度グラデーションを作成する方法

CSS で不透明度グラデーションを作成する

動的背景色にもかかわらず、目標は、テキストを尊重しながら部分的に隠す効果を作成することです。背景。白いオーバーレイは静的な背景には機能しますが、動的な背景には CSS の不透明度グラデーションが必要です。

CSS マスク イメージの使用

最新のブラウザ (Chrome、Safari、Opera) CSS マスク イメージを使用して目的の効果を作成することをサポートします。重要なのは、透明度に移行するグラデーションを組み込んだマスクを定義することです。

<code class="CSS">p {
    color: red;
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}</code>

ここで、rgba(0,0,0,1) は完全な不透明度を表し、rgba(0,0,0,0) ) は完全な透明性を表します。

デモと互換性

デモを表示して、実際の効果を観察します。

次の点に注意してください。この手法は、古いブラウザではサポートが制限されているマスクイメージ プロパティに依存しています。特に Firefox は現在、代わりに SVG マスクをサポートしています。

詳細とブラウザの互換性の詳細については、Caniuse を参照してください: https://caniuse.com/?search=mask-image

以上がCSS でテキスト オーバーレイの動的な不透明度グラデーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。