你如何在CSS中创建渐变背景？

Question

除了CSS之外,还有什么方法可以创建渐变背景吗？

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

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文档

Answer 2

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 <= 9，请使用纯色或图像背景后备。如果您必须支持 Android 浏览器 <= 4.3，也请使用带前缀的版本 ( -webkit-linear-gradient)。

Answer 3

简单易做。试试这个连结

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