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

Answer 2

我认为这是不可能的，但是叠加 2 个对象，一个具有底部的不透明像素，另一个具有顶部的像素，仍然可以避免使用 JS

.background {
    position: absolute;
    background-image: linear-gradient(to top, #666666, black 60px, transparent 60px);
}
.overlay {
    position: relative;
    background-image: linear-gradient(to bottom, #666666, black 60px, transparent 60px);
}