☰

CSS3 透明度 + グラデーション 質問する

tag-icon • tag-icon css gradient
CSS3 透明度 + グラデーション 質問する

RGBA は非常に楽しいですし、、、-webkit-gradientそして-moz-gradient、ええと... progid:DXImageTransform.Microsoft.gradient... そうですね。:)

RGBA とグラデーションの 2 つを組み合わせて、現在の最新の CSS 仕様を使用してアルファ透明度のグラデーションを作成する方法はありますか。

ベストアンサー1

はい。rgba は、webkit と moz の両方のグラデーション宣言で使用できます。

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

（ソース）

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

（ソース）

どうやら、奇妙な「拡張 16 進数」構文を使用して、IE でもこれを行うことができます。最初のペア (例では 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
);

（ソース）

おすすめ記事