div的漸變底色

Question

我想要div的漸變底色。就像下面的image.Is可能在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; 
}