CSS3 グラデーションに透明性を組み込むことはできますか?

透明色の CSS3 グラデーション

CSS3 は、透明度の rgba や色の遷移を作成するグラデーションなど、視覚効果を作成するための強力なツールを提供します。これら 2 つのテクニックを組み合わせて、さまざまな透明度のグラデーションを作成することはできますか?

答え:

はい、最新の CSS で rgba とグラデーションを組み合わせることができます。仕様。方法は次のとおりです:

• WebKit/Safari: from() と to() の両方で rgba 値を含む -webkit-gradient 構文を使用します。パラメータ。

background-image: -webkit-gradient(
  linear, left top, left bottom,
  from(rgba(50, 50, 50, 0.8)),
  to(rgba(80, 80, 80, 0.2)),
  color-stop(.5, #333333)
);

• Mozilla/Firefox: パーセンテージベースの位置に rgba 値を含む -moz-linear-gradient 構文を利用します。

background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%,
  rgba(255, 255, 255, 0) 95%
);

• インターネットExplorer: progid:DXImageTransform.Microsoft.gradient で拡張 16 進構文を使用します。最初の 16 進数のペア (例: "55") は不透明度レベルを示します。

filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF,
  endColorstr=#550000FF
);

/* IE8 and later */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF,
  endColorstr=#550000FF
);

これ組み合わせにより、色と透明度の両方のバリエーションを備えたグラデーションを作成し、Web 要素の視覚的なインパクトを高めることができます。

以上がCSS3 グラデーションに透明性を組み込むことはできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。