CSS3渐变按像素，而不是百分比 [英] CSS3 Gradients by pixel, instead of percentage

问题描述

我想要创建一个线性渐变背景，无论浏览器窗口的大小是什么，适合固定高度的标题，子标题和内容div。

I'm wanting to create a linear gradient background, that fits the same no matter the size of the browser window, to accomodate a fixed-height header, sub-header, and content div.

我的问题是当我移动页面时，我不希望渐变渐变。我可以使用1px宽的图像来获得相同的结果，我想，但我最终希望网站尽可能无图像，禁止标志。

My issue is I don't want the gradient to scale when I move the page around. I could use a 1px wide image to get the same result, I suppose, but I ultimately want the site to be as image-free as possible, barring the logo.

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

Is it possible to use a pixel-defined gradient instead of a percentage-defined gradient?

推荐答案

是的，您可以用标准单位替换百分比。请参阅以下示例：

Yes you can. You can substitute standard units in place of the percentages. See this example:

http://dabblet.com/gist/1856111

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

更新

您需要包含浏览器前缀才能使用上述示例。它们将指定如下：

You need to include the browser prefixes in order to use the above example. They would be specified as follows:

background-image: -webkit-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%);
background-image: -moz-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%);
background-image: -o-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%);
background-image: -ms-linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%);
background-image: linear-gradient(left, #f00 10px, #444 20px, #3465a4 21px, #203388 10rem, #204a87 100%);

这篇关于CSS3渐变按像素，而不是百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！