CSS3渐变使用像素而非百分比

Question

我想创建一个线性渐变背景，适应固定高度的页眉、次页眉和内容区间大小，不管浏览器窗口大小如何。

我的问题是，我不希望在移动页面时渐变效果发生改变。我可以使用1像素宽的图片来达到同样的效果，但我最终希望网站尽可能地不依赖于图片（除了标志）。

是否可以使用像素定义渐变而不是百分比定义渐变？

- Jon Mitten

Answer 1

是的，你可以。你可以在百分比的位置替换为标准单位。看这个例子：

http://dabblet.com/gist/1856111

background: linear-gradient(left, #729fcf 10px, #4c7bb4 20px, #3465a4 63%, #204a87 100%);

- Jim Jeffers

---

在那个网站上可以工作，但在实际使用中却不行。Chrome和Firefox都不能在我的Mac上呈现渐变效果... - Jon Mitten

@JonMitten dabblet渲染时没有前缀。抱歉，我已更新示例以包含它们。 - Jim Jeffers

太好了，这太完美了。看起来运行得非常顺利 - 不过，我注意到当浏览器窗口调整大小时，浏览器会出现“锯齿”效果。这可能是我使用的分辨率水平导致的。我不认为它会分散注意力，所以并不太重要。 - Jon Mitten

我已经从答案中删除了前缀，因为现在不再需要它们。 - Flimm

感谢您发布这个答案。这真的帮助我为一些自定义页面创建渐变，其中渐变的特定部分必须与特定内容区域对齐，然后在移动设备上调整各种屏幕尺寸。 - gurtner

Answer 2

如果你需要一个固定大小的渐变，可以使用 background-size 属性来指定其大小。

- Marat Tanalin

---

这也是一个不错的选择。使用 background-position 和 background-repeat 进行微调。 - Wtower