怎样用css实现一个图片的颜色从左至右的渐变

html-css010

怎样用css实现一个图片的颜色从左至右的渐变,第1张

比如:

.sss{ filter:progid:DXImageTransform.Microsoft.Gradient

(startColorStr='#000000', endColorStr='#666666', gradientType='1')}

其中gradientType='1' 的值可以改的。0,1,2任意你自己咯就是水平,垂直之类的不同。

不建议用滤镜来做渐变,因为像FIREFOX那些核心的浏览器是无法显示出你的渐变得,包括NETSCAPE,OPEAR等都没办法,要渐变的话应该用图片直接做好再贴上去。

background: -webkit-linear-gradient(left, red , blue)

针对于谷歌苹果浏览器 /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, red, blue)

针对于欧鹏浏览器 /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, red, blue)/* Firefox 3.6 - 15 */

针对于火狐浏览器

background: linear-gradient(to right, red , blue)

标准语法ie9/* 标准的语法 */

FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red)/*IE 6 7 8*/

针对于低版本浏览器使用的是css滤镜filter,现代浏览器和手机移动端基本用的是css3