CSS gradient above background pattern

问题

I want to make pattern background and a white to black (with transparency) gradient above it. How to work it out and also make it work cross-browser? I'm starting with Mozilla and I've tried to use code below:

background: url(../images/bg_pattern.gif), -moz-linear-gradient( rgba(255, 255, 255, 0.5) 5%, rgba(130, 130, 130, 0.5) 95%

Of course this does not work. So how to work it out? How would the code look for other browsers? Does IE support many backgrounds and transparency? I think it doesn't so I'll ask before your answers - how to work it out for IE?

回答1:

You will need two separate elements, one overlaying the other. The element on top sounds like it should be your gradient. Also FYI here is a great tool for generating cross-browser gradients, just launched this week at An Event Apart:

http://www.colorzilla.com/gradient-editor/

回答2:

I have a working version for everything excepting IE. :/ I don't remember where I found it, so I can not give the proper credit; however, here it is:

background: -webkit-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.8)) fixed, #454040 url(images/grainy2.png) repeat fixed; background: -ms-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.95)) fixed, #454040 url(images/grainy2.png) repeat fixed; background: -o-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.95)) fixed, #454040 url(images/grainy2.png) repeat fixed; background: -moz-linear-gradient(rgba(224,147,43,.9), rgba(224,147,43,.95)) fixed, #454040 url(images/grainy2.png) repeat fixed;

The first color is your top, the second your bottom, and the third is the color over the pattern (not sure how you would reduce that to transparent). Finally just direct to your pattern.

I'm not entirely sure what ms is for. Like I said, I've been using it for about a few months, but I do not remember the source. I just use them all to make sure they work. Still no fix to IE :/

回答3:

Try this:

    background-image: url(images/pattern.png),  -webkit-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
    background-image: url(images/pattern.png),  -moz-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
    background-image: url(images/pattern.png),  -ms-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
    background-image: url(images/pattern.png),  -o-radial-gradient(0% 100%, rgb(20,150,254), rgb(119,117,174));
    background-image: url(images/pattern.png),  radial-gradient(circle at 0% 100%, rgb(20,150,254), rgb(119,117,174));

来源：https://stackoverflow.com/questions/5901417/css-gradient-above-background-pattern

标签

css

transparency

gradient

background-image