マスクを使用して CSS 不透明度グラデーションを作成するには?

CSS 不透明度グラデーション

目的は、グラデーションのあるオーバーレイが適用される、提供された例に似た CSS ベースの効果を作成することです。

CSS マスクの使用

CSS では、マスクを使用してこれを実現できます。このメソッドに対するブラウザーのサポートはまだ限られていますが、Chrome、Safari、Opera の最新バージョンでは必要なプロパティ (-webkit-mask-image や -webkit-mask-size など) がサポートされています。

重要なのは次のとおりです。完全な不透明 (可視) で始まり、透明 (不可視) で終わる、グラデーションそのものであるマスクを作成します。これにより、その下のコンテンツにグラデーション効果が生じます。

コードの実装

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)));
}

使用例

この CSS を段落要素に適用すると、グラデーション効果でテキストを表示できます。

<p>This is a paragraph with a CSS opacity gradient.</p>

この例では、テキストは、左側の不透明から左側の透明に徐々に変化するグラデーション内で赤色で表示されます。右。透明度により、右に移動すると背景色が透けて見えるようになります。

不透明度のグラデーション効果を確認するには、背景要素の色を設定する必要があることに注意してください。提供されている例では、背景色は水色です:

  <p>This is a paragraph with a CSS opacity gradient.</p>

以上がマスクを使用して CSS 不透明度グラデーションを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。