html - div 的渐变底色

Question

我想要一个 div 的渐变底色。如下图所示。是否可以在 css3 中使用，或者应该使用图像。

任何帮助appriciated。

Answer 1

是和否。

是的，这是可能的。http://www.colorzilla.com/gradient-editor/之类的工具可以轻松创建 CSS3 代码。例如，这有点像你想要的： http: //www.colorzilla.com/gradient-editor/#ffffff+75,cccccc+100 ;Custom

不，您应该始终拥有渐变的后备图像。不是所有的浏览器都支持它，也不是所有的浏览器都支持它。

Answer 2

这将只在元素的底部创建一个渐变，并且不会随着元素的高度而拉伸。它是固定的100px。

.style {
    padding-bottom:100px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-position: center bottom;
    background-size: 100px 100px;
    background-repeat: repeat-x;
}