1. ホーム
  2. css

[解決済み】CSS3 透明度+グラデーション

2022-04-17 07:09:04

質問

RGBAは非常に楽しいものであり、同様に -webkit-gradient , -moz-gradient そして... progid:DXImageTransform.Microsoft.gradient ...そうだな :)

RGBAとグラデーションの2つを組み合わせて、最新のCSS仕様でアルファ透過のグラデーションを作る方法はないでしょうか。

どのように解決するのですか?

webkitとmozの両方のグラデーション宣言でrgbaを使用することができます。

/* webkit example */
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)
);

( src )

/* mozilla example - FF3.6+ */
background-image: -moz-linear-gradient(
  rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%
);

( src )

どうやらIEでも、奇妙なquot;extended hex"構文を使って、これを行うことができるようです。最初のペア(例では55)は、不透明度のレベルを参照しています。

/* approximately a 33% opacity on blue */
filter: progid:DXImageTransform.Microsoft.gradient(
  startColorstr=#550000FF, endColorstr=#550000FF
);

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

( src )