回答
使用这个在你的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 2012-02-24 10:34:29
@PatrikAkerstrand:我认为完全一样的东西。 – thirtydot 2012-02-24 10:35:37
针对未来访客的注意事项:不需要'-ms-'前缀; IE10支持它没有前缀。你只需要IE10预发布版本的'-ms-'前缀(让我们面对它,自IE10完整版发布以来,没有人使用过) – Spudley 2013-08-16 10:47:30
添加两个div标签,给背景颜色链接此
<div style="background-color:black"> </div>
<div style="background: -moz-linear-gradient(top, #55aaee, #003366);"> </div>
这是不准确的语法,这是一个想法,怎么可能u做
试试这个网站。
但也有本网站上的图像和其他的东西,所以如果你要复制的风格,看看他们是怎么做到的,并尝试实现它自己!还有它有一个网站相当NEET背景图案的,它与梯度组合看起来绝对富丽:
:为此将显示在每一个浏览器梯度的简单示例代码
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);
简单易做。 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%);
.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);
}
使用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 Browser < = 4.3,请使用前缀版本(-webkit-linear-gradient
)。
- 1. 如何在Firefox中使用CSS创建渐变背景<3.6?
- 2. css渐变背景
- 3. 如何创建纹理/渐变背景
- 4. 如何创建专业渐变背景
- 5. 如何为LinearLayout创建渐变背景?
- 6. 在HTML中创建渐变背景
- 7. 我可以在IE8中为创建CSS渐变背景吗?
- 8. 用渐变背景在css中创建三角形
- 9. CSS如何多背景+渐变?
- 10. CSS背景过渡 - 渐变
- 11. css背景图像渐变
- 12. CSS过渡背景渐变
- 13. CSS渐变到纯背景
- 14. CSS背景渐变,顶部
- 15. CSS重复渐变背景
- 16. CSS渐变背景按钮
- 17. css垂直渐变背景
- 18. 调整css渐变背景
- 19. CSS HTML背景渐变
- 20. CSS背景渐变验证
- 21. 如何在iOS中的UITableViewCell中创建渐变背景?
- 22. 缩放在CSS中的渐变背景
- 23. 如何在svg背景中创建渐变颜色
- 24. 如何在Vulkan中创建渐变背景?
- 25. 如何在CSS3中创建此渐变背景?
- 26. The Gimp - 创建背景渐变
- 27. 在CSS中创建背景
- 28. CSS中的动画渐变背景
- 29. 如何创建WPF中剥离背景,使用渐变
- 30. 雅虎如何在yahoo.com上创建它的背景渐变?
试试这个链接:http://www.colorzilla.com/gradient-editor/ ..你可以创建真棒渐变背景没有任何麻烦..! :) – casper123 2013-01-31 07:18:59
Colorzilla渐变编辑器非常有用 - 感谢分享,@ casper123 :) – nkha 2014-09-30 18:59:05
**警告:最佳答案有点过时 - 不再需要使用前缀。请参阅[我的答案](http://stackoverflow.com/a/34843103/3853934)以了解最新的解决方案。** – 2016-09-11 17:57:46