CSS渐变颜色以像素为单位从末端停止

我正在从事一个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);

（60像素时从灰色到黑色，然后是透明的，最后10%时从黑色到灰色）。但是，我需要对像素实现同样的功能，因为所讨论的元素在不同的时间具有不同的大小。如果需要的话，我想避免使用JS在不同的动态计算的百分比上重新应用梯度

---

所以，我的问题是：有没有一种方法可以从末尾指定颜色停止x像素（而不是百分比）？

我认为这是不可能的，但是覆盖两个对象，一个是底部不透明像素，另一个是顶部像素，仍然可以避免使用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);
}

---

在po228前面的答案中，但在相同的元素背景中

设置2个不同的渐变，一个从顶部开始，另一个从底部开始

.test{
背景：线性渐变（至顶部，红色10px，白色10px），
线性梯度（至底部，蓝色10px，白色10px）；
背景大小：100%50%；
背景重复：无重复；
背景位置：下中、上中；
高度：150像素；
宽度：300px；
}

---

我刚通过搜索引擎了解到这一点，我认为VAL已经给出了最好的解决方案，它使用了多个背景图像——但我认为在这里使用

背景大小和
背景位置
要灵活得多，稳定性也更高（使用
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%) ;

这正是我最初寻找的行为。：）

演示：
它与
calc（）
一起工作，但不幸的是，它不适用于MS浏览器：

每对的第一行有两个背景叠加的解决方案，第二行有正在使用的计算。不适用于Internet Explorer和边缘浏览器


div{
左边距：自动；
右边距：0；
宽度：200px；
高度：20px；
动画：扫掠5s缓进缓出交替无限；
文本对齐：居中；
颜色：白色；
字体系列：无衬线；
字体大小：粗体；
线高：20px；
将改变：宽度；
}
分区：第n个孩子（奇数）{
背景图像：线性渐变（向右，红色，绿色100px，透明101px），线性渐变（向左，红色，绿色100px）；
边框底部：1px纯色灰色；
}
分区：第n个孩子（偶数）{
背景图像：线性渐变（向右，红色，绿色100px，绿色计算器（100%-100px），红色）；
边缘底部：10px；
}
分区：第n个子（n+3）{
宽度：300px；
}
分区：第n个子（n+5）{
宽度：400px；
}
分区：第n个子（n+7）{
宽度：500px；
}
分区：第n个子（n+9）{
宽度：600px；
}
@关键帧扫描{
100% {
宽度：600px；
}
}
200
300
400
500
600
这太聪明了！很遗憾，我们不能使用负值或类似“right 16px”的值来定位常规背景图像。