Is there a cross-browser, backwards compatible way to code a background gradient?

问题

I've been looking for a solution to background gradients that work in modern browsers and versions of IE down to 7. If someone has a best practice that works, I would appreciate the method as I keep running into solutions that break on a certain browser or version. It should atleast work in IE7-9, Firefox, Safari, Opera, and Chrome.

回答1:

As other have said, CSS3 is compatible with FF, Chrome etc.

For IE9, you can use their official CSS Gradient Background Maker, which will generate an inline SVG image, supported also by most of modern browsers (although it give some issues on Safari).

For IE8, you can use

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#000000, GradientType=1);

Reference

For IE 5.5 - 7:

filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#FFFFFF, endColorStr=#FFFFFF, GradientType=1);

Reference

startColorStr and endColorStr are pretty self-explanatory. GradientType is 1 for horizontal and 0 for vertical. There's no such thing as radial nor diagonal gradients before IE9.

I strongly suggest you not to use an htc solutions (like css3pie) as they give a lot of side effects.

It's not really easy to implement, but if you need a polyfill there's cssSandpaper.

回答2:

This is a quite complete gradient generator colorzilla

Anyway for now there isn't a clear standard in css. We hope it will arrive asap !

If you would like to see some gradient even in Explorer 6-8 using a CSS3-like approach (for ex. linear-gradient(#EEFF99, #66EE33), and without using Explorer proprietary filter) you can try Css PIE. I used it extensively, it's an amazing piece of software based on HTML Component (.htc), expecially good for buttons, but in my experience has some problem when your page rely on many ajax effects, particularly if you redim the size of the frame/page, because not always the buttons/gradients are updated. (anyway CSS Pie is used even in important sites)

Css PIE

回答3:

Use this tool to generate your gradient

回答4:

Old browsers (< IE7) don't have support to css gradient properties. You can use css3 to make gradient backgrounds and then set a solid color to old browsers.

回答5:

No ie7, but this is a good start

         background: -moz-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%, rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 
         background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,rgba(150,150,150,0.2)), color-stop(52%,rgba(80,80,50,0.5)), color-stop(100%,rgba(20,20,20,0.8))); 
         background: -webkit-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 
         background: -o-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 
         background: -ms-linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 
         background: linear-gradient(-45deg, rgba(150,150,150,0.2) 1%,rgba(80,80,50,0.5) 52%, rgba(20,20,20,0.8) 100%); 

         /* FF3.6+ */ 
         /* Chrome,Safari4+ */
         /* Chrome10+,Safari5.1+ */ 
         /* Opera 11.10+ */
         /* IE10+ */ 
         /* W3C */

回答6:

My answer is not related to HTML or CSS. This is a another way that if you know basics of creating gradient images using MS Paint or GIMP then this technique will work for all type of browsers.

来源：https://stackoverflow.com/questions/12643719/is-there-a-cross-browser-backwards-compatible-way-to-code-a-background-gradient

标签

html

css

cross-browser