你如何在css中制作渐变背景？答案

【问题标题】：How do you make a gradient background in css?你如何在css中制作渐变背景？
【发布时间】：2012-02-24 10:10:21
【问题描述】：

有没有什么方法可以只使用 CSS 来创建渐变背景？

您可以看到我想要实现的示例on this website。

【问题讨论】：

试试这个链接：colorzilla.com/gradient-editor..您可以轻松创建很棒的渐变背景..！ :)
Colorzilla 渐变编辑器非常有用——感谢分享，@casper123 :)
警告：最佳答案有点过时了——不再需要使用前缀。请参阅my answer 了解最新的解决方案。
我最近创建了一个应用程序，用于生成漂亮的 CSS 渐变。我希望它对快速发现有趣的渐变配置有用。你可以在这里试试：gradienteer.com
试试这个webgradients.com！

【解决方案1】：

在你的 CSS 中使用它：

background-image: -o-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -moz-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.24, rgb(254,133,107)), color-stop(0.62, rgb(35,171,17)));
background-image: -webkit-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
background-image: -ms-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
/* This last line is all you need for modern browsers */
background-image: linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);

另见：

【讨论】：

我将第一行放在最后，因为这是该属性的“标准”版本。这样，如果浏览器支持标准符号，就会使用它，而不是专有符号
@PatrikAkerstrand：我也是这么想的。
未来访问者注意事项：-ms- 前缀不是必需的； IE10 支持不带前缀。对于 IE10 的预发布版本，您只需要 -ms- 前缀（让我们面对现实，自从 IE10 的完整版发布以来，没有人使用过）
这个答案已经过时了。现在您不必在任何主要浏览器中使用前缀版本，也许除了 Android Browser caniuse。

【解决方案2】：

简单易做。 Try this link

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);

/* Opera */ 
background-image: -o-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FCFEFF), color-stop(1, #AF00EF));

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%);

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FCFEFF 0%, #AF00EF 100%);

【讨论】：

【解决方案3】：

将background-image 与linear-gradient() 或radial-gradient() 一起使用。

.linear-gradient {
  background-image: linear-gradient(to bottom, #000077, #65A5FF);
}
.radial-gradient {
  background-image: radial-gradient(#000077, #65A5FF);
}
div {
  width: 100%;
  height: 200px;
}

<h1>Linear gradient</h1>
<div class="linear-gradient"></div>
<h1>Radial gradient</h1>
<div class="radial-gradient"></div>

根据caniuse.com，所有主流浏览器都支持 CSS 渐变。如果您必须支持 IE -webkit-linear-gradient)。

【讨论】：

【解决方案4】：

.bckgrnd {
  background-color:Green;
  background-image: -webkit-gradient(linear, 0% 0%,0% 0%, from(Green), to(Yellow));
  background-image: -webkit-linear-gradient(top, Green, Yellow);
  background-image: -moz-linear-gradient(top, Green, Yellow);
  background-image: -ms-linear-gradient(top, Green, Yellow);
  background-image: -o-linear-gradient(top, Green, Yellow);
}

【讨论】：

【解决方案5】：

试试这个网站。

http://www.colorzilla.com/gradient-editor/

但是这个网站上也有图片和其他的东西，所以如果你想复制风格，看看他们是怎么做的，并尝试自己实现它！还有一个网站有漂亮的背景图案，结合渐变看起来绝对丰富和美丽：

http://subtlepatterns.com/

将在每个浏览器中显示的渐变的简单示例代码：

background: rgb(243,226,199);
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZTJjNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2MxOWU2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2I2OGQ0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOWQ0YjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  rgba(243,226,199,1) 0%, rgba(193,158,103,1) 50%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(243,226,199,1)), color-stop(50%,rgba(193,158,103,1)), color-stop(51%,rgba(182,141,76,1)), color-stop(100%,rgba(233,212,179,1)));
background: -webkit-linear-gradient(left,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: -o-linear-gradient(left,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: -ms-linear-gradient(left,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
background: linear-gradient(left,  rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1 );

【讨论】：

【解决方案6】：

background-image: linear-gradient(to bottom, #FFFFFF, #FAFAFA);

或

background: linear-gradient(#FFFFFF, #FAFAFA);

【讨论】：

【解决方案7】：

添加两个 div 标签并给出背景颜色链接

<div style="background-color:black"> </div>
<div style="background: -moz-linear-gradient(top, #55aaee, #003366);"> </div>

这不是确切的语法，这是一个想法，你可以怎么做

【讨论】：