I have built a div element and gave the background color green.Then,I wanted to change the color's opacity until it is white, from top to bottom. The darkest green will be top and lightest color which is whi开发者_运维问答te will be the bottom of it. Is there any way to do that with css,without creating an image for it? Thanks
You can use CSS3 to generate background gradients (via the background-image element) BUT it's not uniformly supported across browsers.
You'd be looking at code like this:
background-color: #108B00; /* Fallback solid color */
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, #108B00, #FFFFFF); /* Chrome 10+, Saf5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #108B00, #FFFFFF); /* FF3.6 */
background-image: -ms-linear-gradient(top, #108B00, #FFFFFF); /* IE10 */
background-image: -o-linear-gradient(top, #108B00, #FFFFFF); /* Opera 11.10+ */
background-image: linear-gradient(top, #108B00, #FFFFFF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#108B00', EndColorStr='#FFFFFF'); /* IE6–IE9 */
精彩评论