11

CSS3とRGBAを使用して、白から透明へのグラデーションを作成しています。

div {
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-image: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 1)), to(rgba(0, 0, 0, 0)));
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-image: linear-gradient(left, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0));
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 1)', endColorstr='rgba(0, 0, 0, 0)', GradientType=1);
    padding: 2rem 0;
}

ここでフィドル：http：//jsfiddle.net/alecrust/fYz45/

ただし、お気づきのように、グラデーションは中央が暗くなっています。私はこれを取得しています：

取得

そして私はこれを期待しています：

期待

どうすれば修正できますか？

4

4 に答える 4

14

最後のステップを：ではなく#FFFFFF00（rgba(255, 255, 255, 0)）に変更します。#00000000

http://jsfiddle.net/fYz45/6/

于 2013-03-26T21:03:10.630 に答える
3

最終的な色は、黒ではなく、白で透明にする必要があります

それ以外の

rgba(0, 0, 0, 0)

で終わる

rgba (255, 255, 255, 0)
于 2013-03-26T21:04:59.410 に答える
1

他の誰かがグラデーションに問題がある場合、または特定の側面（角度、透明度など）を取得する場合は、このツールを試して詳細を確認することをお勧めします： http: //www.colorzilla.com/gradient-editor/以下のコードはサンプルですそれができることの。透明度は上部の正方形、下部の色によって制御されます。それはあなたがより多くの色を落とし続けることを可能にします。それは同様に良い後方比較性を持っており、そしてまたいくつかはプリセットを持っています。 

`div {
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,58,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffff3a',GradientType=1 ); /* IE6-9 */
background-repeat: repeat-x;
padding: 2rem 0;
}`

于 2016-04-29T14:14:55.330 に答える
0 
div{
     background-color:#ffffff;
     filter:progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#ffffff,       endColorstr=#ffff01);
     background-image:-moz-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
     background-image:-webkit-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
     background-image:-ms-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
     background-image:linear-gradient(left top, #ffffff 0%, #ffff01 100%);
     background-image:-o-linear-gradient(left top, #ffffff 0%, #ffff01 100%);
     background-image:-webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff),        color-stop(100%,#ffff01));
}
于 2013-03-26T21:11:52.540 に答える