CSS滤镜之Alpha滤镜——透明度

在CSS中有一个Alpha滤镜,这个滤镜可以设置目标元素的透明度。还可以通过指定坐标,从而实现各种不同范围的透明度。

具体语法如下:
{filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx,starty=#starty,finishx=#finishx,finishy=#finishy)}

具体参数含义如下:
opacity 透明度。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。 
finishopacity 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。 
style   指定透明区域的形状特征:0 代表统一形状,1 代表线形,2 代表放射状,3 代表矩形 
startx   渐变透明效果开始处的 X坐标。 只能style = 1才有效
starty   渐变透明效果开始处的 Y坐标。 只能style = 1才有效 
finishx 渐变透明效果结束处的 X坐标。  只能style = 1才有效
finishy 渐变透明效果结束处的 Y坐标。 只能style = 1才有效

以上的参数可以选用,可以只设置一个opacity

实例:

<html>

<head>

<title>alpha效果展示:</title>  
<style type="text/Css">                //*定义CSS样式*//    

.half{filter:alpha(opacity=50)}        //*透明度50,默认形状*//   

.s0{filter:alpha(opacity=30,style=0)}  //*透明度30,统一形状*//   

.s1{filter:alpha(opacity=80,style=1)}  //*透明度80,线性透明*//   

.s2{filter:alpha(opacity=80,style=2)}  //*透明度80,放射性*//   

.s3{filter:alpha(opacity=80,style=3)}  //*透明度80,长方形*//   </style>   
</head>  

<body>  
<img src="Sunset.jpg">  
<img class=half src="Sunset.jpg">   

<img class=s0 src="Sunset.jpg">     

<img class=s1 src="Sunset.jpg">      

<img class=s2 src="Sunset.jpg">        

<img class=s3 src="Sunset.jpg">       

</body>  

</html>

注意:在滤镜属性中,每个参数之间使用英文的逗号(,)分隔开,交换各个参数的位置,并不影响滤镜的显示效果。

CSS滤镜之Alpha滤镜——透明度

时间: 2024-12-29 10:06:27

CSS滤镜之Alpha滤镜——透明度的相关文章

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=195) opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明.

CSS滤镜之Blur滤镜——模糊

Blur滤镜比较类似于ps里面的运动模糊效果. 语法: {FILTER:blur(add=add,direction=direction,strength=strength)} “ADD”参数是一个布尔判断“TRUE(默认)”或者“FALSE”.它指定图片是否被改变成印象派的模糊效果.模糊效果是按顺时针的方向进行的, “DIRECTION”参数用来设置模糊的方向.其中0度代表垂直向上,然后每45度为一个单位.它的默认值是向左的270度. “STRENGTH“值只能使用整数来指定,她代表有多少像素

HTML CSS决定定位、滤镜

1.position:relative;相对对位 不影响元素本身的特性: 不使元素脱离文档流: 如果没有定位偏移量,对元素本身没有任何影响: 定位元素位置控制:top/right/bottom/left: IE6下父级的overflow:hidden是包不住子集的相对定位:解决只需要 给父级就加上定位元素: 在IE6下定位元素的父宽高都为奇数时,定位元素的bottom和right会有 1px的偏差 2.position:absolute;绝对定位 可以使元素脱离文档流 使内嵌支持宽高: 块属性标

CSS如何设置div背景透明度且兼容性良好

CSS如何设置div背景透明度且兼容性良好: 建议:尽可能的手写代码,可以有效的提高学习效率和深度. 设置对象的透明度在很多网页特效中都有实用,设置对象的透明度并不难,唯一的难点可能就是如何兼容各大主流浏览器,下面就简单介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" cont

图像滤镜艺术--Toaster滤镜

根据Instagram CEO的说法,Toaster滤镜是Instagram所有滤镜中最复杂的滤镜,这个滤镜给人一种新奇的红色烘烤感,很能让人联想起这个Toaster单词的本意呵呵,今天我将用C#实现这个滤镜,当然我也只是探索,如何逼近它的效果,差异的存在在所难免,大家勿怪哦. 按照之前的说法,还是先使用Photoshop进行模拟,然后根据模拟步骤,进行C#代码编写. 首先,看下效果图: (a)PS效果图 (b)Instagram效果图 (c)C#代码效果图 效果怎么样我说了不算呵呵,下面介绍P

Atitit 图像处理之仿油画效果&#160;Oilpaint油画滤镜 水彩画 漫画滤镜&#160;v2

Atitit 图像处理之仿油画效果 Oilpaint油画滤镜 水彩画 漫画滤镜 v2 1.1. 具体源码参考1 2. ,油画 水彩画具有几个比较明显的特点如下:1 2.1. 明暗层次(灰度)较少  也就5级别够用了1 2.2. 颜色泛用   使用的颜色比较单一,一般不会超过7种颜色,不像真实照片那样,具有丰富的颜色种类:2 3. 水彩画滤镜算法如下:2 3.1. 这个其实就是灰度层次降低维度的过程.3 3.2. 模板半径Radius用来调节水彩画的水彩程度.即是颜色的降低维度的过程3 3.3.

css alpha滤镜

alpha是来设置透明度的. 格式: filter:alpha(opacity=opcity,finishopacity=finishopacity,style=style,startX=startX,startY=startY,finishX=finishX,finishY=finishY) Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明. Finishopacity是一个可选项,用来设置结束时的透明度,从而达到一种渐变效果,它的值也是从0到100. S

烦人的IE7、8,半透明滤镜(filter:alpha)失效、png半透明失效的解决办法

在项目中的问题,之前用的是用IETest测试IE7,8发现背景透明设置无效,后来找文章解决!看了一些资料,做下总结. 几种IE半透明CSS样式 IE8里可以这样写 -ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=50)”; IE7里可以这样写 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); IE6,IE7,IE8里都可以这样写 filter:alpha(

css中filter:alpha透明度总结

Alpha,设置透明度. 用法: [html] view plain copy FILTER:alpha(opacity=80);/* 设置不透明度为80 */ filter:Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)Opacity:透明度级别,范围是0-100,0代表完全透明,100代表完全不透明.FinishOpacity:设置渐变的透明效果时,用来指定结束时的透明度