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

由于您定义了两个单独的轴，因此默认形状为ellipse. 您需要指定它是circle：

http://jsfiddle.net/tK5Ch/3/（只改了标准渐变）

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