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

Posted 2023-05-13

<td height="64" colspan="7" bgcolor="#007AAD"id=tb><img src="tbanner.gif" width="500" height="121" alt="" /></td>
要实现以上这个图片颜色从左至右的渐变,用css怎样做,我知道是用滤镜的,可我做不出来,高手们出手救救急吧

参考技术A 比如：
.sss filter:progid:DXImageTransform.Microsoft.Gradient
(startColorStr='#000000', endColorStr='#666666', gradientType='1')

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

不建议用滤镜来做渐变，因为像FIREFOX那些核心的浏览器是无法显示出你的渐变得，包括NETSCAPE,OPEAR等都没办法，要渐变的话应该用图片直接做好再贴上去。本回答被提问者采纳 参考技术B 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 参考技术C CSS本身可以控制背景色，用linear-gradient(to right, 左边颜色 , 右边颜色);

ps图片怎样实现渐变

首先我先将一副图片展示给大家：

我所做的效果是想把图片做成渐变。而不改变中间图片的颜色效果。

接下来我来说明一下我的所做思路。

首先将图片中间部分选择出来。然后复制成一个图层。

详细操作是用魔棒进行反向选择，选择出中间部分：

然后我在复制一个图层。目的是将这个图层作为单独中间图图层。

然后我们将原图层做成渐变色样式：

注：这里选择的是图层0，图层1仅仅是中间图层的部分。

然后保存成png图片就能够了。