CSS 渐变内容很少：修复了 Chrome 的问题

发布于 2024-10-16 17:32:33 字数 532 浏览 1 评论 0原文

我问了一个问题 CSS Gradients with little content 一段时间

我想出了一个可能的解决方案修复 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 只支持颜色停止百分比？无论如何要让这项工作成功吗？

原文

I asked a question CSS Gradients with little content some time back

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));
}

only the Firefox part works, it appears webkit only supports percentages for color stops? Anyway to make this work?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

一页 2024-10-23 17:32:33

只需从 200px 中删除 px 即可。在 Webkit 的渐变语法中，像素值是无单位的。即

background: -webkit-gradient(linear, 0 0, 0 200, from(blue), to(red));

参见 Surfin' Safari 博客的 CSS 渐变简介：

点是一对空格分隔的值。该语法支持数字、百分比或关键字 top、bottom、left 和 right 来表示点值。

数字没有单位，而长度则有单位，根据 CSS 规范。

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));

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.

Numbers don't have a unit, as opposed to lengths, which do, according to the CSS specification.

回复收藏 0 原文

寻梦旅人 2024-10-23 17:32:33

试试这个：

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.3, rgb(255,0,0)),
    color-stop(0.47, rgb(255,0,0)),
    color-stop(1, rgb(0,0,254))
);

有关 -webkit-gradient 的更多信息请访问：http ://webkit.org/blog/175/introducing-css-gradients/

实例：http: //jsfiddle.net/aruUS/3/

为您提供更多帮助的工具：http://gradients.glrzad。 com/

try this:

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.3, rgb(255,0,0)),
    color-stop(0.47, rgb(255,0,0)),
    color-stop(1, rgb(0,0,254))
);

More information for -webkit-gradient visit: http://webkit.org/blog/175/introducing-css-gradients/

Live example: http://jsfiddle.net/aruUS/3/

Tool to help you more: http://gradients.glrzad.com/

回复收藏 0 原文

~没有更多了~