1

複数のグラデーションを行うのはかなり新しいです。線形グラデーションがあり、その上に放射状グラデーションがあります。

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, #033968),
    color-stop(1, #408BCD)
);
background-image: url('../img/background-noise.png'), -o-linear-gradient(top, #033968 0%, #408BCD 100%);
background-image: url('../img/background-noise.png'), -ms-linear-gradient(top, #033968 0%, #408BCD 100%);
background-image: url('../img/background-noise.png'), -moz-radial-gradient(center top, farthest-side, rgba(255,255,255,1) 0, rgba(255,255,255,0) 100px), -moz-linear-gradient(top, #033968 0%, #408BCD 100%);
background-image: url('../img/background-noise.png'), -webkit-radial-gradient(center top, farthest-side, rgba(255,255,255,1) 0, rgba(255,255,255,0) 100px), -webkit-linear-gradient(top, #033968 0%, #408BCD 100%);
background-image: url('../img/background-noise.png'), radial-gradient(farthest-side at center top, rgba(255,255,255,1) 0, rgba(255,255,255,0) 100px), linear-gradient(to top, #033968 0%, #408BCD 100%);

正常に動作しますが、なぜ放射状グラデーションのサイズがピクセル単位で定義されているのか疑問に思っていますが、それは % のように機能します。

チェックアウト: http://jsfiddle.net/tK5Ch/

ブラウザのサイズを調整すると、放射状のグラデーションが移動します。100px x 100pxのように固定したいだけです

何が起こっているのですか？

4

1 に答える 1

1

2 つの別個の軸が定義されているため、既定の形状はellipseです。次のように指定する必要がありますcircle。

http://jsfiddle.net/tK5Ch/3/ (標準グラデーションのみ変更)

radial-gradient(circle farthest-side at center top, ...
于 2014-03-18T03:11:16.827 に答える