css透明opacity和滤镜filter的准确用法

前提:除IE外,目前主流浏览器 Opera 9.0+,Safari 1.2(WebKit 125) +,chrome等等都支持opacity这个透明度属性。

IE 从4.0版开始,就提供了一些内置的多媒体滤镜特效,具体的使用方法是:
语法:

filter:filter
要使用的滤镜效果,多个之间用空格分割

说明:使用该属性时,必须具有height,width,position中的一个,在MAC平台上不可用

支持以下14种滤镜
Alpha 让HTML元件呈现出透明的渐进效果
Blur 让HTML元件产生风吹模糊的效果
Chroma 让图像中的某一颜色变成透明色
DropShadow 让HTML元件有一个下落式的阴影
FlipH 让HTML元件水平翻转
FlipV 让HTML元件垂直翻转
Glow 在元件的周围产生光晕而模糊的效果
Gray 把一个彩色的图片变成黑白色
Invert 产生图片的照片底片的效果
Light 在HTML元件上放置一个光影
Mask 利用另一个HTML元件在另一个元件上产生图像的遮罩
Shadow 产生一个比较立体的阴影
Wave 让HTML元件产生水平或是垂直方向上的波浪变形
XRay 产生HTML元件的轮廓,就像是照X光一样

Alpha滤镜参数详解

Opacity 不透明的程度,百分比。 从0到100,0表是完全透明,100表示完全不透明。
FinishOpacity 这是一个同Opacity一起使用的选择性的参数,当同时Opacity和FinishOpacity时,可以制作出透明渐进的效果,比较酷。 从0到100,0表是完全透明,100表示完全不透明。
Style 当同时设定了Opacity和finishOpacity产生透明渐进时,它主要是用赤指定渐进的显示形状。 0:没有渐进;1:直线渐进;2:圆形渐进;3:矩形辐射。
StartX 渐进开始的 X 坐标值
StartY 渐进开始的 Y 坐标值
FinishX 渐进结束的 X 坐标值
FinishY 渐进结束的 Y 坐标值

H5支持透明背景颜色

background-color:rgba(0,152,50,0.7)
表示百分之七十的不透明度,而且支持rgba写法,不支持16位
background-color:transparent;支持完全透明

#使用透明度+背景颜色或者背景图片实现
background-color:rgb(0,152,50);
opacity:0.7
那么,问题来了,IE6-IE8完全不支持 opacity,所以还得考虑一下 IE的滤镜
使用alpha通道来设计不透明通道
filter:alpha(opacity=70)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.CSS静态滤镜样式 (filter)(只有IE4.0以上支持) CSS静态滤镜样式的使用方法:{ filter...
    恩德_b0c2阅读 742评论 0 1
  • CSS 滤镜 CSS样式表是一种为超文本标签语言提供增强补充服务的技术,可对每一个html的标签做精雕细刻的修饰。...
    阿甘笔记阅读 559评论 0 1
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,196评论 4 61
  • 四五年前,语言培训行业兴起四六级“包过”培训班,这不是吹牛,而且成功率还不低。大概两三年前,很多雅思培训机构也开...
    鸭思博士阅读 1,212评论 0 1
  • 跟UIApplication的中的idleTimerDisabled有关,官方描述如下: 因此只要在didFini...
    ProteanBear阅读 8,960评论 0 1