【发布时间】：2018-07-27 18:55:24
【问题描述】：
我想创建一个线性渐变背景，无论浏览器窗口大小如何，它都适合，以容纳固定高度的标题、子标题和内容 div。
我的问题是我不希望在移动页面时渐变缩放。我想我可以使用 1 像素宽的图像来获得相同的结果，但我最终希望网站尽可能无图像，除非有徽标。
是否可以使用像素定义的渐变而不是百分比定义的渐变？
【问题讨论】：
【发布时间】：2018-07-27 18:55:24
【问题描述】：
是的，你可以。您可以用标准单位代替百分比。看这个例子：
http://dabblet.com/gist/1856111
background: linear-gradient(left, #729fcf 10px, #4c7bb4 20px, #3465a4 63%, #204a87 100%);
【讨论】：
-
在那个网站上工作，但不是在实践中。 Chrome 和 Firefox 都不会在我的 Mac 上渲染渐变...
-
@JonMitten dabblet 渲染不带前缀。抱歉，我已更新示例以包含它们。
-
太好了，这太完美了。似乎工作得很好 - 但是，我确实注意到在调整浏览器窗口大小时浏览器呈现“锯齿状”。这可能是我使用的划分级别的结果。我不相信它会分散注意力而不会太重要。
-
我已经从答案中删除了前缀，因为它们现在不再需要了。
-
感谢您发布此答案。这确实帮助我为一些自定义页面创建了渐变，其中渐变的特定部分必须与特定内容区域对齐，然后针对移动设备上的各种屏幕尺寸进行调整
如果您需要固定大小的渐变，请使用background-size 属性指定其大小。
【讨论】：
-
这也是一个不错的选择。使用
background-position和background-repeat进行微调。