CSS 3渐变距离底部n像素 - Webkit/Safari

Question

有没有一种方法可以在元素底部离停止点n像素的位置创建一个渐变？例如，在Moz/Firefox中，它将如下所示：-moz-linear-gradient(center bottom , #f00 2%, #d00 31px)。需要注意的是，这个渐变有一个伴随渐变，可以对盒子的顶部做同样的事情。因此，实际上，这个CSS在FF中看起来像这样，我需要为webkit复制它：

background-image:
      -moz-linear-gradient(center top , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px), 
      -moz-linear-gradient(center bottom , rgba(255,0,0,0.75) 2%, rgba(255,0,0,0) 31px);

- prodigitalson

Answer 1

使用当前的webkit语法无法实现该效果。不过有好消息！在webkit博客上刚刚宣布了一个新的-webkit-linear-gradient属性，基本上与-moz语法相匹配，并且可以让您实现此操作。这种语法应该成为CSS3的标准语法，因此您将能够在某个时候完全放弃-webkit和-moz。（旧的-webkit-gradient属性将继续无限期地工作，但未来不再推荐使用。）

- Michael Mullany

---

实际上，我看到了那个错误报告并审核了本月的修补程序...我只是希望当前的语法中是否有我漏掉的东西。此外，对于任何其他感兴趣的人，新语法已在v528+（夜间构建）中实现。 - prodigitalson

Answer 2

你可以使用 -webkit-background-size 来以像素来确定渐变尺寸，使用 background-position 将其放置在底部。

- Lea Verou

Answer 3

不太确定您想要什么，但我成功地使用以下方法停止了一个以px为单位的渐变 -

background-size:100% 31px; background-repeat:no-repeat;

- seanjacob

Answer 4

你尝试过类似这样的吗？

-webkit-gradient(linear, center bottom , #f00 2%, #d00 31px)

我希望这个网站能对你有所帮助。

- kajo

---

问题是 color-stop 只接受百分比（或百分比的小数表示），不接受明确的值。同时，点似乎在停止位置上没有发挥作用，只有方向 - 即所有 px 定义都从盒子顶部开始。我无法计算百分比，因为渐变不应该是比例的，它应该始终正好停止在距离盒子底部 31px 的位置，无论盒子高度是10px 还是1000px。我可以使用图片，但我正在尽可能地保持 CSS 的一致性。 - prodigitalson