500字范文,内容丰富有趣,生活中的好帮手!
500字范文 > html图片渐变怎么实现 css实现背景图片渐变

html图片渐变怎么实现 css实现背景图片渐变

时间:2020-04-30 00:18:57

相关推荐

html图片渐变怎么实现 css实现背景图片渐变

兼容ie6.7.8.9 firefox,safari,chrome 不兼容opera

css代码:

.gradient{

width:300px;

height:150px;

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);

-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=red,endcolorstr=blue,gradientType=0);

background:red; /* 一些不支持背景渐变的浏览器 */

background:-moz-linear-gradient(top, red, rgba(0, 0, 255, 0.5));

background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0.5)));

}

上面的滤镜代码主要有三个参数,依次是:startcolorstr, endcolorstr, 以及gradientType。

其中gradientType=1代表横向渐变,gradientType=0代表纵向淅变。startcolorstr=”色彩”

代表渐变渐变起始的色彩,endcolorstr=”色彩” 代表渐变结尾的色彩。

opacity表示透明度,默认的范围是从0 到 100,他们其实是百分比的形式。

也就是说,0代表完全透明,100代表完全不透明。

finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。

范围也是0 到 100。

style用来指定透明区域的形状特征:

0 代表统一形状

1 代表线形

2 代表放射状

3 代表矩形。

startx 渐变透明效果开始处的 X坐标。

starty 渐变透明效果开始处的 Y坐标。

finishx 渐变透明效果结束处的 X坐标。

finishy 渐变透明效果结束处的 Y坐标

html代码:

效果图如下:

渐变工具:

/gradient-editor/http://samples./workshop/samples/author/filter/DropShadow.htm

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。