Html 如何制作带有渐变背景的纯 CSS div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3500092/
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
How to make a pure CSS div with a gradient background?
提问by AngryHacker
Let's say the height of the div is 34px and the width is 480px. The div should look like this:
假设 div 的高度为 34px，宽度为 480px。div 应该是这样的：
and I don't want it to actually use an image, just CSS. Is it possible?
我不希望它实际使用图像，只使用 CSS。是否可以？
采纳答案by AngryHacker
It is with CSS3. There's even a handy gradient generatorwhich takes the guesswork out of it. Of course, this is completely unsupported in IE8 and under.
它与 CSS3。甚至还有一个方便的梯度生成器，可以消除猜测。当然，这在 IE8 及以下版本中是完全不支持的。
Edit
编辑
For the sake of completeness, as sluukkonenmentioned, IE does support gradients in CSS using the filter filter:progid:DXImageTransform.Microsoft.Gradient.
为了完整起见，正如sluukkonen提到的，IE 确实支持使用 filter 的 CSS 渐变filter:progid:DXImageTransform.Microsoft.Gradient。
回答by Kyle
It is possible with CSS3;
使用 CSS3 是可能的；
Example: (black and grey)
示例：（黑色和灰色）
mydiv
{
background-image:
-webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.15, rgb(189,189,189)),
color-stop(0.58, rgb(0,0,0)),
color-stop(0.79, rgb(0,0,0))
)
-moz-linear-gradient(
center bottom,
rgb(189,189,189) 15%,
rgb(0,0,0) 58%,
rgb(0,0,0) 79%
)
}
But this only works in Mozilla and webkit browsers, IE8 and under will ignore this.
但这仅适用于 Mozilla 和 webkit 浏览器，IE8 及以下将忽略这一点。
Hope it helps :)
希望能帮助到你 ：）
回答by Delan Azabani
There are ways to do this with -webkit-gradientand -moz-linear-gradient'functions' as values of background-image. These use different syntax but will be standardised if the gradient spec makes it into CSS 3's final release.
有一些方法可以使用-webkit-gradient和-moz-linear-gradient'functions' 作为 的值来做到这一点background-image。它们使用不同的语法，但如果渐变规范将其纳入 CSS 3 的最终版本，则会被标准化。
/* webkit example */ background-image: -webkit-gradient( linear, left top, left bottom, from(rgba(50,50,50,0.8)), to(rgba(80,80,80,0.2)), color-stop(.5,#333333) );
/* mozilla example - FF3.6+ */ background-image: -moz-linear-gradient( rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95% );
