Html CSS3 渐变像素,而不是百分比

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9336846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-28 22:37:10  来源:igfitidea点击:

CSS3 Gradients by pixel, instead of percentage

htmlcss

提问by Jon Mitten

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.

我想创建一个线性渐变背景,无论浏览器窗口的大小如何,它都适合相同的内容,以容纳固定高度的标题、子标题和内容 div。

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.

我的问题是我不希望在移动页面时渐变缩放。我想我可以使用 1px 宽的图像来获得相同的结果,但我最终希望网站尽可能无图像,除非有徽标。

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

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

回答by Jim Jeffers

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

是的你可以。您可以用标准单位代替百分比。看这个例子:

http://dabblet.com/gist/1856111

http://dabblet.com/gist/1856111

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

回答by Marat Tanalin

If you need a fixed-size gradient, use the background-sizeproperty to specify its size.

如果您需要固定大小的渐变,请使用该background-size属性指定其大小。