CSS で不透明度のグラデーションを実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-10-26 08:41:02

オリジナル

475 人が閲覧しました

How to Achieve Opacity Gradients in 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 で不透明度のグラデーションを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。