通过使用 CSS3 线性渐变可以让背景两个或多个指定的颜色之间显示平稳的过渡,由于用到CSS3所以需要考虑下浏览器兼容问题,例如:
从左到右的线性渐变,且带有透明度的样式:
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)); /* Firefox 3.6 - 15*/background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
标准语法:linear-gradient(direction, color1, color2, …)
Safari浏览器:-webkit-linear-gradientOpera浏览器:-o-linear-gradientFirefox浏览器:-moz-linear-gradientdirection:
从上到下(默认情况下)从左到右:to right对角:to bottom rightcolor:
rgba()中的4个数字,前3个为颜色rgb,最后1个是透明度,取值0-1,0为透明,1为不透明
参考
/css3/css3-gradients.html