开发者

Changing the opacity of background color continously without using an image

开发者 https://www.devze.com 2023-04-04 05:03 出处:网络
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 whic

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 */
0

精彩评论

暂无评论...
验证码 换一张
取 消