如何在CSS中制作渐变背景？

Question

有没有仅使用CSS创建渐变背景的方法？

您可以在此网站上看到我想要实现的示例。

- user1179295

---

尝试这个链接：http://www.colorzilla.com/gradient-editor/。你可以轻松地创建令人惊叹的渐变背景！ :) - casper123

Colorzilla渐变编辑器非常有用--感谢分享，@casper123 :) - nkha

警告：顶部答案有点过时了——不再需要使用前缀。请参见我的答案获取最新的解决方案。 - Michał Perłakowski

我最近创建了一个应用程序，用于生成漂亮的CSS渐变。我希望它能够快速发现有趣的渐变配置，对你有所帮助。你可以在这里尝试：https://gradienteer.com/ - Alethes

试试这个 https://webgradients.com/！ - Ivan Aracki

请查看这个便捷的CSS渐变生成器（https://www.magicpattern.design/tools/gradient-generator），用于此类背景。它支持线性、径向和圆锥形CSS渐变。 - dmraptis

Answer 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%);

参见：

• 规范说明
• MDN文档

- Ghost Answer

---

我会尽力为您翻译：我会将第一行放在最后，因为那是该属性的“标准”版本。这样，如果浏览器支持标准符号，它将被使用，而不是专有符号。 - PatrikAkerstrand

@PatrikAkerstrand：我也是这么想的。 - thirtydot

请注意：对于未来的访问者，不需要使用“-ms-”前缀；IE10支持没有前缀的版本。只有在IE10的预发布版本中才需要使用“-ms-”前缀（实际上，自从IE10完整版发布以来，没有人使用过预发布版本）。 - Spudley

这个答案已经过时了。现在你不必在任何主流浏览器中使用带前缀的版本，也许除了 Android 浏览器 <= 4.3。请参见 caniuse。 - Michał Perłakowski

Answer 2

简单易操作。 点击此链接。

/* 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%);

- Abhishek

Answer 3

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

.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 <= 9，请使用纯色或图像背景回退。 如果您需要支持Android浏览器 <= 4.3，还需使用具有前缀的版本(-webkit-linear-gradient)。

- Michał Perłakowski

Answer 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);
}

- Jay Shukla

Answer 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 );

- mas-designs

Answer 6

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

或者

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

- Codemaker

Answer 7

添加两个div标签并设置背景颜色，如下：

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

这不是精确的语法，而是一个想法，你可以这样做

- Mulesoft Developer