289

-webkit-gradientRGBAはとても楽しい-moz-gradientですprogid:DXImageTransform.Microsoft.gradient。:)

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

4

7 に答える 7

329

はい。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)
);

(ソース)

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

(ソース)

于 2010-02-19T03:46:28.563 に答える
106

新しい構文は、最新のすべてのブラウザー (Chrome 26、Opera 12.1、IE 10、および Firefox 16 以降) でしばらくの間サポートされています: http://caniuse.com/#feat=css-gradients

background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

これにより、上部の黒一色から始まり、下部の完全に透明になるグラデーションがレンダリングされます。

MDN のドキュメント。

于 2013-01-30T17:03:59.377 に答える
15

これは本当にクールなものです！ほぼ同じものが必要でしたが、白から透明への水平グラデーションが必要でした。そして、それはうまく機能しています！これが私のコードです：

.gradient{
        /* webkit example */
        background-image: -webkit-gradient(
          linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
          to(rgba(255, 255, 255, 0))
        );

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

        /* IE 5.5 - 7 */
        filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColorStr=#FFFFFF
        );

        /* IE8 uses -ms-filter for whatever reason... */
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(
          gradientType=1, startColor=0, endColoStr=#FFFFFF
        );
    }
于 2010-09-10T08:05:43.910 に答える
3 
#grad
{
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/
}

これは w3schools で見つけたもので、グラデーションと透明度を探していたときに自分のニーズに合っていました。w3schools を参照するためのリンクを提供しています。グラデーションと透明度を探している人がいれば、これが役立つことを願っています。

http://www.w3schools.com/css/css3_gradients.asp

また、リンクを貼り付けて不透明度を変更するためにw3schoolsで試してみました

http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear_trans

それが役に立てば幸い。

于 2014-04-13T10:29:36.093 に答える
3

これが私のコードです：

background: #e8e3e3; /* Old browsers */
  background: -moz-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%, rgba(246, 242, 242, 0.95) 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232, 227, 227, 0.95)), color-stop(100%,rgba(246, 242, 242, 0.95))); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* IE10+ */
  background: linear-gradient(to bottom,  rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(232, 227, 227, 0.95)', endColorstr='rgba(246, 242, 242, 0.95)',GradientType=0 ); /* IE6-9 */
于 2013-05-06T14:18:24.550 に答える
0

この最近の例に出くわしました。最新の例を単純化して使用するには、css に「grad」のセレクター クラスを指定します (下位互換性を含めました)。

.grad {
    background-color: #F07575; /* fallback color if gradients are not supported */
    background-image: -webkit-linear-gradient(top left, red, rgba(255,0,0,0));/* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -moz-linear-gradient(top left, red, rgba(255,0,0,0));/* For Firefox (3.6 to 15) */
    background-image: -o-linear-gradient(top left, red, rgba(255,0,0,0));/* For old Opera (11.1 to 12.0) */
    background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0)); /* Standard syntax; must be last */
}

https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradientから

于 2014-12-20T21:41:24.203 に答える