`
hailinren
  • 浏览: 17180 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

CSS透明滤镜

阅读更多

filter:alpha(opacity=50);-moz-opacity:0.5;
Opacity: 相对于IE。火狐似乎好像不支持。 值:以百分比为值,100 表示不透明度为100%;50侧代表不透明度为50%。
-moz-opacity: 相对于FF,火狐。 值:以小数点为值,1 表示不透明度为100%;0.5侧代表不透明度为50%。
注意:上面的滤镜IE8不支持。因此我们需要用 <meta http-equiv="X-UA-Compatible" content="IE=7" /> 来声明。让IE8强制显示为IE7效果。

基本上可以完美解决!以下滤镜,在FF里面不支持的,于上面同理。在名称前面加个-moz 便可解决。

其他滤镜
黑白照片 filter: gray;
X光照片 filter: Xray;
风动模糊 filter: blur(add=true,direction=45,strength=30);
正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻转 filter: fliph;
垂直翻转 filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
马赛克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
发光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2

 

 

 

 

分享到:
评论

相关推荐

    淘宝SDK模块代码 能兼容ie6ie7ie8以及firefox的css透明滤镜

    这个名为“淘宝SDK模块代码 能兼容ie6ie7ie8以及firefox的css透明滤镜”的资源,旨在解决一个核心问题:如何在不同浏览器间,特别是老旧的Internet Explorer(IE6、IE7、IE8)和Firefox上实现一致的CSS透明效果。...

    css 滤镜大全,全部css滤镜

    CSS滤镜是现代Web设计中一个非常强大的工具,它们允许开发者在不使用任何图像编辑软件的情况下,对网页上的图片和元素应用各种视觉效果。在给定的文件中,提到了一系列的CSS滤镜效果,接下来将对这些滤镜进行详细的...

    精通CSS滤镜,精通CSS滤镜

    这个专题——“精通CSS滤镜”深入探讨了CSS滤镜的各种特性、用途以及如何有效地利用它们来提升网站的视觉吸引力。 一、CSS滤镜简介 CSS滤镜(Filter)是CSS3的一个重要特性,它允许我们对元素应用不同的视觉效果,...

    CSS滤镜效果大全

    ### CSS滤镜效果大全 #### 一、Alpha滤镜 - 设置透明度 Alpha滤镜用于控制元素的透明度。此滤镜提供了丰富的参数配置来实现不同程度的透明效果,包括简单的透明度调整到复杂的渐变透明。 - **表达格式**: ```...

    css部分滤镜效果代码

    CSS滤镜效果是CSS中的一种特性,它允许开发者对网页元素应用视觉效果,如模糊、颜色调整、饱和度变化等。这些效果可以增强用户界面的视觉吸引力,提升用户体验。本篇将详细介绍CSS滤镜效果以及如何在实际项目中应用...

    CSS教程【CSS样式CSS滤镜】CHM版

    总之,CSS是网页设计不可或缺的一部分,掌握CSS样式和滤镜的应用能够帮助我们构建美观、动态且适应性强的网页。通过系统学习CSS教程,无论是初学者还是经验丰富的开发者,都能不断提升自己的技能水平,创作出更具...

    CSS滤镜在网页设计中的应用.rar

    **CSS滤镜在网页设计中的应用** 在网页设计领域,CSS滤镜是一种强大的工具,它允许开发者通过简单的代码实现各种视觉效果,如图像模糊、颜色调整、渐变、光照等,极大地提升了网页的视觉吸引力和用户体验。本篇将...

    Css filter 滤镜大全

    Alpha滤镜允许你调整图像的透明度。语法如下: ```css .filter-alpha { -ms-filter: "alpha(opacity=50)"; filter: Alpha(Opacity=50); } ``` 其中`Opacity`参数用于设置初始透明度,取值范围是0到100,0表示...

    Dreamweaver中CSS滤镜的功能和参数设置

    在Dreamweaver中,CSS滤镜是一种强大的工具,允许开发者为网页元素添加各种视觉效果,如透明度、模糊、阴影、翻转等。通过CSS滤镜,你可以增强网页的视觉吸引力,创造出各种独特的视觉体验。以下是一些主要的CSS滤镜...

    css自动生成滤镜效果

    7. `opacity()`:透明度滤镜,控制元素的透明度,参数是0到1之间。 8. `saturate()`:饱和度滤镜,调整元素的饱和度,参数是0到1之间,0表示无色,1表示原饱和度。 9. `sepia()`:棕褐色滤镜,使元素呈现老照片效果...

    CSS滤镜使用教程

    其中,CSS滤镜(CSS Filters)是CSS3引入的一项特性,它允许我们对网页元素进行视觉效果处理,如模糊、灰度、饱和度调整、对比度增强等。本教程将深入讲解CSS滤镜的使用方法,帮助你提升网页设计的视觉表现力。 一...

    精通CSS滤镜.chm + CSS中文教程.exe

    "精通CSS滤镜.chm"和"CSS中文教程.exe"两个文件显然与学习和深入理解CSS滤镜技术有关,特别是对于中文用户来说,它们提供了宝贵的资源。 "精通CSS滤镜.chm"可能是一个帮助文档,包含了关于CSS滤镜的详细信息。CHM是...

    CSS解决滤镜黑圈问题

    2. **AlphaImageLoader滤镜**:是为了解决IE6到IE9的透明度和滤镜问题而设计的。它可以通过`style.filter`属性来应用,如`progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')`,但这不适用...

    css滤镜filter中文手册

    **CSS滤镜(Filter)详解** CSS滤镜(Filter)是一种强大的工具,它允许开发者对网页元素的视觉表现进行各种效果处理,如模糊、灰度、饱和度调整、颜色变化等。在本中文手册中,我们将深入探讨CSS滤镜的各种属性和...

    一个不错的css3滤镜网页特效

    在现代网页设计中,CSS3已经成为了一种强大的工具,它为开发者提供了许多创新的功能和特性,其中滤镜(Filters)是提升网页视觉效果的重要一环。"一个不错的css3滤镜网页特效"这个主题,主要关注如何利用CSS3滤镜来...

    滤镜CSS3效果

    在CSS3中,滤镜功能提供了丰富的样式和效果,使得网页设计变得更加动态和富有创意。 描述中提到的“滤镜特效HML5+CSS3”暗示我们将探讨如何结合这两种技术来实现这些特效。HTML5是第五代超文本标记语言,增强了网页...

    立用Dreamweaver MX中的CSS样式实现滤镜制作

    本文将深入探讨如何使用Dreamweaver MX和CSS样式来实现Alpha滤镜和Glow滤镜的制作。 首先,我们来看Alpha滤镜。Alpha滤镜主要用于调整元素的透明度,实现半透明效果。在CSS中,我们可以使用`opacity`属性来实现这个...

    CSS样式CSS教程CSS滤镜

    这个“CSS教程CSS样式CSS滤镜”的CHM版教程,很可能是包含了一系列关于CSS基础知识、进阶技巧、滤镜应用等内容的详细讲解,帮助初学者系统地学习和掌握CSS。CHM文件是一种Microsoft的帮助文件格式,它将HTML文档打包...

    css filter滤镜详解

    透明度是 CSS 滤镜中最基本的效果之一,可以使元素的透明度从 0(完全透明)到 100(完全不透明)。语法为:`filter: Alpha(opacity=n)`,其中 n 是透明度的值。 二、模糊(Blur) 模糊效果可以使元素模糊化,语法...

Global site tag (gtag.js) - Google Analytics