HTML/CSS 渐变在特定高度停止并以纯色继续
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5016796/
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
HTML/CSS Gradient that stops at a particular height and continues further with a solid color
提问by ReganY
I want to have a gradient in HTML/CSS.
我想在 HTML/CSS 中使用渐变。
Assume some DIV is always more than 400px tall. I want to add the gradient so that it is #FFFFFF at the top and #EEEEEE at 300px. So the first 300px (height-wise) is a nice 'white to grey' gradient. After 300px, regardless of how tall the DIV goes, I want the background color to stay #EEEEEE.
假设某些 DIV 的高度总是超过 400 像素。我想添加渐变，使其顶部为#FFFFFF，300px 为#EEEEEE。所以第一个 300px（高度方向）是一个很好的“白色到灰色”渐变。在 300px 之后，无论 DIV 有多高，我都希望背景颜色保持#EEEEEE。
I guess this has something to do with gradient stops (?)
我想这与梯度停止（？）
How can I do it?
我该怎么做？
P.S. If it is not possible in IE I don't care. I am fine if gecko and webkit browsers show this properly.
PS 如果在 IE 中不可能，我不在乎。如果 Gecko 和 webkit 浏览器正确显示，我很好。
采纳答案by TNC
height: 400px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
You might have to play with 0.75 as it's a percentage of your height, but that should do the trick.
您可能必须使用 0.75，因为它是您身高的百分比，但这应该可以解决问题。
回答by ReganY
background-color: #eee;
background-image: linear-gradient(top, #fff 0%, #eee 300px); /* W3C */
background-image: -moz-linear-gradient(top, #fff 0%, #eee 300px); /* FF3.6+ */
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 300px); /* Chrome10+,Safari5.1+ */
This is according to the current Mozilla documentation: https://developer.mozilla.org/en/CSS/-moz-linear-gradient.
这是根据当前的 Mozilla 文档：https: //developer.mozilla.org/en/CSS/-moz-linear-gradient。
I've confirmed that it works in Firefox 3.6 and Chrome 15.
我已经确认它适用于 Firefox 3.6 和 Chrome 15。
回答by seanjacob
Alternative way
替代方式
background-color: #eee;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);
background-repeat:no-repeat;
background-size:100% 300px;
回答by Baztoune
First, it's good to know that you can use more than 2 color-stop on gradients, but you can't use fixed pixels as coordinates, it has to be a percentage.
首先，很高兴知道您可以在渐变上使用超过 2 个色标，但您不能使用固定像素作为坐标，它必须是一个百分比。
In your case, you can simply define your first color-stop at 0% and the second one at 50% or so. I suggest you to use a gradient generatorbecause the implementation depends on the browser.
在您的情况下，您可以简单地将第一个色标定义为 0%，将第二个色标定义为 50% 左右。我建议您使用渐变生成器，因为实现取决于浏览器。
I came up with
我想出了
background: #FFFFFF; /* old browsers*/
background: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 50%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(50%,#EEEEEE)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EEEEEE', GradientType=0); /* ie */
回答by Vicky Biswas
background: -moz-linear-gradient(top, #d7d7d7 0px, #f3f3f3 178px);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,#d7d7d7), color-stop(178px,#f3f3f3));
background: -webkit-linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
background: -o-linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
background: -ms-linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
background: linear-gradient(top, #d7d7d7 0px,#f3f3f3 178px);
this works for me
这对我有用
回答by Scrimothy
I had the same thing just now. I wanted to put a gradient on the main content div which varied significantly in height from page to page.
我刚才也有同样的情况。我想在主要内容 div 上放置一个渐变，从页面到页面的高度变化很大。
I ended up with this and it works great (and not too much extra code).
我最终得到了这个，它工作得很好（而且没有太多额外的代码）。
CSS:
CSS：
.main-container {
position: relative;
width: 100%;
}
.gradient-container {
/* gradient code from 0% to 100% -- from colorzilla.com */
height: 115px; /* sets the height of my gradient in pixels */
position: absolute; /* so that it doesn't ruin the flow of content */
width: 100%;
}
.content-container {
position: relative;
width: 100%;
}
HTML:
HTML：
<div class="main-container">
<div class="gradient-container"></div> <!-- the only thing added for gradient -->
<div class="content-container">
<!-- the rest of my page content goes here -->
</div>
</div>
I highly recommend using colorzilla's gradient-editorto generate the CSS. It makes cross-browser optimizing really easy (especially if you're used to Photoshop or Fireworks).
我强烈建议使用colorzilla 的渐变编辑器来生成 CSS。它使跨浏览器优化变得非常容易（特别是如果您习惯了 Photoshop 或 Fireworks）。
回答by Addo Solutions
You could do a:
你可以做一个：
<div id="bgGen"></div>
then
然后
#bgGen{
height: 400px;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
margin-bottom:-400px;
}
It is kinda cheating, but it works...
这有点作弊，但它有效......
回答by Nit
The easiest solution for the problem is to simply use multiple backgrounds and give the gradient part of the background a defined size, either in percentage or in pixels.
该问题的最简单解决方案是简单地使用多个背景，并以百分比或像素为单位为背景的渐变部分提供定义的大小。
body {
background: linear-gradient(to right, green 0%, blue 100%), green;
background-size: 100px 100%, 100%;
background-repeat: no-repeat;
background-position: right;
}
html,
body {
height: 100%;
margin: 0;
}Mix and match with browser prefixes as necessary.
根据需要混合和匹配浏览器前缀。
回答by user3438298
this worked for me
这对我有用
background: rgb(238, 239, 240) rgb(192, 193, 194) 400px;
background: -webkit-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background: -moz-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background: linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background-repeat:repeat-x; background-color:#eeeff0;
Also someone commented why not just make a gradient image and set it as the background. I prefer to go mostly css now too, with mobile design and limited data usage for visitors, try to limit as much images as possible. If it can be done with css than do it
还有人评论为什么不制作渐变图像并将其设置为背景。我现在也更喜欢使用 css，移动设计和访问者的数据使用量有限，尽量限制尽可能多的图像。如果它可以用 css 来完成，那么就不要这样做
