Linear-gradient works only with -moz vendor prefix

问题

Since this code works with the -moz vendor prefix I thought it would work a well with -webkit or -ms for instance, but it doesn't seem to allow it:

background-image: -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);

I guess Mozilla is allowing something that shouldn't be used, but my research has been infructuous as of now...

Any idea?

回答1:

Remove the center. Then it should work.

Also make sure you have it for all browsers:

background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);
background-image: linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.95) 100%);

Example Fiddle

回答2:

There's a new syntax for linear gradients where the first keyword is like (to bottom, etc).

Example:
http://jsfiddle.net/H8Byj/

div {
    background-image: linear-gradient(to bottom , rgba(0, 255, 255, 1) 0%, rgba(255, 0, 255, 1) 75%, rgba(255, 255, 0, 1) 100%);
}

I didn't know the old syntax with prefix was still active in Firefox but the new one appeared circa Fx10-Fx15 according to Resources found at Caniuse.
ColorZilla CSS Gradient Generator will give you all the declarations needed for retro and multibrowser compatibility.

来源：https://stackoverflow.com/questions/21438873/linear-gradient-works-only-with-moz-vendor-prefix

标签

css3

linear-gradients

vendor-prefix