CSS 渐变颜色从末尾停止(以像素为单位)

Question

我正在开发一个 HTML/CSS/JS 元素，其中应用程序的大小是固定的，元素必须根据设计精确定位。因为窗口大小是固定的，所以我可以轻松地使用 CSS 中的像素尺寸，而不用担心调整浏览器的大小。我还有幸不用担心 IE 或 Opera:该应用程序必须只能在 webkit 和 firefox 中运行。

在一些地方，我需要有一个超过特定像素数的渐变背景。这很容易用类似的东西来完成

background-image: linear-gradient(to top, #666666, #000000 60px);

(及其对应的 -webkit- 和 -moz-。)这对大多数元素都有效。然而，有几个地方我需要有颜色停止的顶部和底部像素位置。如果这些是百分比，那么它可以通过类似的方式完成:

background-image: linear-gradient(to top, #666666, black 60px, transparent 60px, transparent 90%, black 90%, #666666);

(从灰色到黑色超过 60px，然后透明，然后在最后 10% 上从黑色到灰色)。但是我需要用像素完成同样的事情，因为所讨论的元素在不同时间的大小不同。如果需要，我想避免必须使用 JS 在不同的动态计算的百分比点重新应用渐变。

那么，我的问题是:有没有一种方法可以从末尾指定 x 像素(不是百分比)的色标？

Answer 1

我刚刚通过搜索引擎找到了这个，我认为最好的解决方案已经由 vals 使用多个背景图像给出 - 但不是使用 background-size 和background-position 我认为在这里使用 alpha 颜色(使用 rgba())更加灵活和稳定，如下例所示:

background-image:
    /* top gradient - pixels fixed */
    linear-gradient(to bottom, rgb(128,128,128) 0px,rgba(128,128,128,0) 16px), 
    /* bottom gradient - pixels fixed */
    linear-gradient(to top, rgb(128,128,128) 0px, rgba(128,128,128,0) 16px),  
    /* background gradient - relative */
    linear-gradient(to bottom, #eee 0%, #ccc 100%) ;

这正是我最初寻找的行为。 :)

演示:http://codepen.io/Grilly86/pen/LVBxgQ