CSS で不透明度のグラデーションを実現するにはどうすればよいですか?

CSS での不透明度グラデーションの実装

動的な背景色のオーバーレイを含む特定の視覚効果を再現するために、多くの人が探してきました。 CSS の不透明度グラデーションのソリューション。質問に示されている例は、この実装の試みを示していますが、コードの複雑さやブラウザの制限により不十分です。

ありがたいことに、ブラウザの進歩により、マスクイメージプロパティ。現在、Chrome、Safari、Opera、および Internet Explorer を除くすべてのブラウザでサポートされているこのプロパティは、より効率的でブラウザ間互換性のあるソリューションを提供します。

CSS 実装:

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

その秘訣は、グラデーションをマスク自体として使用することであり、そこではグラデーションが (アルファ値を介して) 透明に移行します。これにより、背景色に基づいて動的に調整されるオーバーレイ効果を作成できます。

単色背景の例:

[デモ リンク]

補足:

• mask-image のすべての画像プロパティがサポートされています。
CSS マスキングはテキスト要素と画像では期待どおりに動作しない可能性があります。

以上がCSS で不透明度のグラデーションを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。