当前位置:首页 > 代码学苑 > 网建教程

CSS半透明效果实现方法

来源:wordpress 作者: 2020-06-09

在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坐标。
starty  渐变透明效果开始处的 Y坐标。
finishx 渐变透明效果结束处的 X坐标。
finishy 渐变透明效果结束处的 Y坐标。

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

{filter:alpha(opacity=50);opacity:0.5; background-color:red;}


注:此方法有个缺点,就是层内的所有内容都会跟着半透明,当然如果愿意,也可以对里面的内容再单独设置透明度为100。

相关栏目:
猜你喜欢
点击查看更多