有没有办法用CSS创建渐变背景?
您可以看到我想要实现的示例on this website。
答案 0 :(得分:26)
在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%);
另见:
答案 1 :(得分:5)
简单易行。 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%);
答案 2 :(得分:4)
将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&lt; = 9,请使用纯色或图像背景回退。如果您必须支持Android Browser&lt; = 4.3,请使用前缀版本(-webkit-linear-gradient
)。
答案 3 :(得分:2)
.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);
}
答案 4 :(得分:0)
试试这个网站。
但是这个网站上还有图片和其他东西,所以如果你想复制这个样式,看看他们是怎么做到的,并尝试自己实现它!还有一个网站有漂亮的背景图案,结合渐变看起来非常丰富和美丽:
一个简单的渐变示例代码,将在每个浏览器中显示:
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 );
答案 5 :(得分:0)
background-image: linear-gradient(to bottom, #FFFFFF, #FAFAFA);
或
background: linear-gradient(#FFFFFF, #FAFAFA);
答案 6 :(得分:-3)
添加两个div标签并提供背景颜色链接
<div style="background-color:black"> </div>
<div style="background: -moz-linear-gradient(top, #55aaee, #003366);"> </div>
这不是确切的语法,这是你怎么做的想法