css透明饱和度,css中filter:alpha透明度使用

css透明饱和度,css中filter:alpha透明度使用css中filter:alpha透明度使用使用filter可以设置透明度,filter:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示例,大家可以参考下filter:alpha(opacity=0,finishopacity=100,style=2,startx=0,starty=5,finishx=200,finisyY=19…

css中filter:alpha透明度使用

使用filter可以设置透明度,filter:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示例,大家可以参考下

filter:alpha(opacity=0, finishopacity=100, style=2, startx=0, starty=5, finishx=200, finisyY=195)

opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明。

finishopacity:设置渐变的透明效果时,用来指定结束时的透明度,范围也是0 到 100。

style:设置渐变透明的样式,值为0代表统一形状、1代表线形、2代表放射状、3代表长方形。

startx和starty:代表渐变透明效果的开始X和Y坐标。

finishx和finishy:代表渐变透明效果结束X和Y 的坐标。

对于IE上述方法是没有问题的。若要支持firefox请参照下面:

filter:alpha(opacity=50); /* IE */

-moz-opacity:0.5; /* Moz + FF */

opacity: 0.5; /* 支持CSS3的浏览器(FF 1.5也支持)*/

简单解释,IE使用私有属性filter:alpha(opacity),Moz Family使用私有属性-moz-opacity,而标准的属性是opacity(CSS 3, Moz Family部分支持CSS3)。后面的数值是透明度,使用百分比或者小数(alpha(opacity))使用大于0小于100的数值,其实也是百分比)。

关于filter的引申

一、CSS3 filter

CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。

二、使用方法:

filter:filter(value);

filter:filter(value) filter(value) filter(value);/* 多属性 */

三、具体实例

1、Blur(模糊)

图像模糊参数单位:px/em/pt。 示例:

filter: blur(5px);

-webkit-filter: blur(5px);

-moz-filter: blur(5px);

-o-filter: blur(5px);

-ms-filter: blur(5px);

2、Brightness(亮度)

亮度参数:”-1″至”1″,值越大亮度越高。示例:

filter: brightness(0.5);

-webkit-filter: brightness(0.5);

-moz-filter: brightness(0.5);

-o-filter: brightness(0.5);

-ms-filter: brightness(0.5);

3、Saturation(饱和度)

饱和度参数:半分比,以100%为中间值。 示例:

filter: saturate(50%);

-webkit-filter: saturate(50%);

-moz-filter: saturate(50%);

-o-filter: saturate(50%);

-ms-filter: saturate(50%);

4、Hue Rotate(色相)

色相参数:角度值0—360。 示例:

filter: hue-rotate(180deg);

-webkit-filter: hue-rotate(180deg);

-moz-filter: hue-rotate(180deg);

-o-filter: hue-rotate(180deg);

-ms-filter: hue-rotate(180deg);

5、Contrast(对比度)

对比度参数:百分比;以100%为中间值。示例:

filter: contrast(50%);

-webkit-filter: contrast(50%);

-moz-filter: contrast(50%);

-o-filter: contrast(50%);

-ms-filter: contrast(50%);

6、Invert(反相)

反相参数:百分比;0%-100%。示例:

filter: invert(100%);

-webkit-filter: invert(100%);

-moz-filter: invert(100%);

-o-filter: invert(100%);

-ms-filter: invert(100%);

7、Grayscale(灰度)

灰度参数:百分比 0%-100%。示例:

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-o-filter: grayscale(100%);

-ms-filter: grayscale(100%);

Sepia(怀旧)

8、Sepia(怀旧)

怀旧参数:百分比 0%-100%。示例:

filter: sepia(100%);

-webkit-filter: sepia(100%);

-moz-filter: sepia(100%);

-o-filter: sepia(100%);

-ms-filter: sepia(100%);

补充:ie6-ie8不支持opacity透明度的解决办法

大体结构:灰色半透明部分和文字是两个图层,绝对定位到图片的底部。因为放到一个图层的话文字也会变成半透明。

半透明部分设置样式:opacity:0.7    在ie9/ie10/ff/chrome/opera/safari显示正常,但是这样在ie6-ie8中是不支持的,需要加上下面这句话:

filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);

此外这种效果不能用ietester中的ie6测试,因为ietester的ie6这样写也是不透明的,但是实际上ie6中已经显示正常了。

css中如何设置透明度

怎样在CSS样式中设置背景的透明度,下面一个具体的实例.把类为box的层设为透明.

今天的文章css透明饱和度,css中filter:alpha透明度使用分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/9405.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注