CSS3 グラデーションでアルファ透明度を使用できますか?-CSSチュートリアル-php.cn

CSS3 グラデーションでアルファ透明度を使用できますか?

Patricia Arquette

リリース： 2024-12-10 09:00:20

オリジナル

858 人が閲覧しました

Can CSS3 Gradients Use Alpha Transparency?

CSS3 の透明性とグラデーションの組み合わせ

CSS3 は、RGBA 機能とグラデーション機能の興味深い組み合わせを提供します。これらの機能を組み合わせて、CSS 仕様に基づいてアルファ透明度をシームレスに調整するグラデーションを可能にすることは可能ですか?

回答:

確かに、組み込むことは可能です。 rgba を Webkit と moz の両方のグラデーション宣言に追加します。以下に例を示します。

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 Gradient (Firefox 3.6 ):

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

ログイン後にコピー

Internet Explorer でも、独自の「拡張 16 進数」を使用してこの機能を提供しています。構文。コードの最初のペアは、不透明度レベルを表します:

Internet Explorer グラデーション:

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

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

ログイン後にコピー

以上がCSS3 グラデーションでアルファ透明度を使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。