CSS渐变少有内容:修复有Chrome的问题 [英] CSS Gradients with little content: Fix has problem with Chrome
问题描述
我问了一个问题有一点时间内容的CSS渐变返回
我想出了一个可能的解决方案 http://jsfiddle.net / aruUS / 2 /
I came up with a possible fix http://jsfiddle.net/aruUS/2/
html, body { min-height: 100% }
body {
background: -moz-linear-gradient(top, blue, red 200px);
background: -webkit-gradient(linear, 0 0, 0 200px, from(blue), to(red));
}
只有Firefox部分工作,webkit只支持停止百分比吗?
only the Firefox part works, it appears webkit only supports percentages for color stops? Anyway to make this work?
推荐答案
只需将 px
code> 200px 。 Webkit的渐变语法中的像素值是无单位的。 Ie
Simply remove the px
from 200px
. Pixel values are unitless in Webkit's gradient syntax. I.e.
background: -webkit-gradient(linear, 0 0, 0 200, from(blue), to(red));
查看Surfin的Safari博客介绍CSS渐变:
See the Surfin' Safari blog's Introducing CSS Gradients:
点是一对的空间分隔值。
A point is a pair of space-separated values. The syntax supports numbers, percentages or the keywords top, bottom, left and right for point values.
数字 >没有单位,而是长度,根据CSS规范。
Numbers don't have a unit, as opposed to lengths, which do, according to the CSS specification.
这篇关于CSS渐变少有内容:修复有Chrome的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!