对进行多重渐变相当陌生。我有一个线性渐变,然后是顶部的径向渐变。
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%);
它工作正常,但我想知道为什么径向渐变的大小以像素为单位定义,但它就像一个 %。
checkout :http://jsfiddle.net/tK5Ch/
当您调整浏览器大小时,径向渐变会四处移动。我只想让它固定,比如 100px x 100px
知道发生了什么事吗?
最佳答案
Since you have two separate axes defined, the default shape is ellipse
.您需要指定它是 circle
:
http://jsfiddle.net/tK5Ch/3/ (只改变了标准渐变)
radial-gradient(circle farthest-side at center top, ...
关于html - 线性和径向梯度定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22469501/