html - 创建跨浏览器的背景渐变

Question

也许是愚蠢的问题，但我需要一些帮助
我正在创建一个网站，我注意到这段背景渐变代码

背景:-webkit-gradient(linear, left top, left bottom, from(rgba(180, 180, 180, 0)), to(#E7E7E7));
仅适用于谷歌浏览器，在其他浏览器中它看起来不像我想要的，所以有人有一些建议吗？

Check demo on fiddle

Answer 1

标准语法是

linear-gradient(to right, rgba(180, 180, 180, 0), #E7E7E7);

body {
  background-image: linear-gradient(to right, rgba(180, 180, 180, 0), #E7E7E7);
}

根据 MDN , 一个跨浏览器的代码将是

background-color: #E7E7E7; /* fallback color if gradients are not supported */
background-image: -webkit-linear-gradient(left, rgba(180, 180, 180, 0), #E7E7E7); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
background-image:    -moz-linear-gradient(left, rgba(180, 180, 180, 0), #E7E7E7); /* For Firefox (3.6 to 15) */
background-image:      -o-linear-gradient(left, rgba(180, 180, 180, 0), #E7E7E7); /* For old Opera (11.1 to 12.0) */ 
background-image:         linear-gradient(to right, rgba(180, 180, 180, 0), #E7E7E7); /* Standard syntax; must be last */