css黑白渐变透明,CSS3透明+渐变

Yes. You can use rgba in both webkit and moz gradient declarations:

/* webkit example */

background-image: -webkit-gradient(

linear, left top, left bottom, from(rgba(50,50,50,0.8)),

to(rgba(80,80,80,0.2)), color-stop(.5,#333333)

);

/* mozilla example - FF3.6+ */

background-image: -moz-linear-gradient(

rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 95%

);

Apparently you can even do this in IE, using an odd "extended hex" syntax. The first pair (in the example 55) refers to the level of opacity:

/* approximately a 33% opacity on blue */

filter: progid:DXImageTransform.Microsoft.gradient(

startColorstr=#550000FF, endColorstr=#550000FF

);

/* IE8 uses -ms-filter for whatever reason... */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(

startColorstr=#550000FF, endColorstr=#550000FF

);

New syntax has been supported for a while by all modern browsers (starting from Chrome 26, Opera 12.1, IE 10 and Firefox 16): http://caniuse.com/#feat=css-gradients

background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));

This renders a gradient, starting from solid black at the top, to fully transparent at the bottom.

This is some really cool stuff! I needed pretty much the same, but with horizontal gradient from white to transparent. And it is working just fine! Here ist my code:

.gradient{

/* webkit example */

background-image: -webkit-gradient(

linear, right top, left top, from(rgba(255, 255, 255, 1.0)),

to(rgba(255, 255, 255, 0))

);

/* mozilla example - FF3.6+ */

background-image: -moz-linear-gradient(

right center,

rgba(255, 255, 255, 1.0) 20%, rgba(255, 255, 255, 0) 95%

);

/* IE 5.5 - 7 */

filter: progid:DXImageTransform.Microsoft.gradient(

gradientType=1, startColor=0, endColorStr=#FFFFFF

);

/* IE8 uses -ms-filter for whatever reason... */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(

gradientType=1, startColor=0, endColoStr=#FFFFFF

);

}

Here is my code:

background: #e8e3e3; /* Old browsers */

background: -moz-linear-gradient(top, rgba(232, 227, 227, 0.95) 0%, rgba(246, 242, 242, 0.95) 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(232, 227, 227, 0.95)), color-stop(100%,rgba(246, 242, 242, 0.95))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top, rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top, rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top, rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* IE10+ */

background: linear-gradient(to bottom, rgba(232, 227, 227, 0.95) 0%,rgba(246, 242, 242, 0.95) 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(232, 227, 227, 0.95)', endColorstr='rgba(246, 242, 242, 0.95)',GradientType=0 ); /* IE6-9 */

#grad

{

background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/

background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/

background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/

}

I found this in w3schools and suited my needs while I was looking for gradient and transparency. I am providing the link to refer to w3schools. Hope this helps if any one is looking for gradient and transparency.

Also I tried it in w3schools to change the opacity pasting the link for it check it

Hope it helps.

I just came across this more recent example . To simplify and use the most recent examples, giving the css a selector class of 'grad',(I've included backwards compatibility)

.grad {

background-color: #F07575; /* fallback color if gradients are not supported */

background-image: -webkit-linear-gradient(top left, red, rgba(255,0,0,0));/* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */

background-image: -moz-linear-gradient(top left, red, rgba(255,0,0,0));/* For Firefox (3.6 to 15) */

background-image: -o-linear-gradient(top left, red, rgba(255,0,0,0));/* For old Opera (11.1 to 12.0) */

background-image: linear-gradient(to bottom right, red, rgba(255,0,0,0)); /* Standard syntax; must be last */

}

The following is the one that I'm using to generate a vertical gradient from completely opaque (top) to 20% in transparency (bottom) for the same color:

background: linear-gradient(to bottom, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

background: -o-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* Opera 11.10+ */

background: -moz-linear-gradient(top, rgba(0, 64, 122, 1) 0%, rgba(0, 64, 122, 0.8) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* Chrome10-25,Safari5.1-6 */

background: -ms-linear-gradient(top, rgba(0, 64, 122, 1) 0%,rgba(0, 64, 122, 0.8) 100%); /* IE10+ */

-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE8 */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00407a', endColorstr='#cc00407a',GradientType=0 ); /* IE 5.5 - 9 */