网页中实现透明度的方法(普及)

用户头像
北京/产品设计师/14年前/9266浏览
网页中实现透明度的方法(普及)
用户头像
甄小快

今天有朋友问我,“图层:透明度怎么改,开始以为是PS。后来告诉我是网页,那就用DIV+CSS的代码很容易实行咯。。。普及一下。不知道的看一下吧。filter: alpha(o

今天有朋友问我,“图层:透明度怎么改,开始以为是PS。后来告诉我是网页,那就用DIV+CSS的代码很容易实行咯。。。普及一下。不知道的看一下吧。


filter: alpha(opacity=70); 
opacity: 0.7;

加到CSS文件里就好了。需要哪层加哪层。很好理解~


黑白照片 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


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

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

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

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

FinishX和FinishY:代表渐变透明效果结束X和Y 的坐标。
3
举报
|
158
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
UI 登录界面设计模板包
APP/小程序商业项目UI模板|99个高保真UI+79个原型
新拟态风格 UI设计组件库
拟物风质感写实UI卡片合集源文件
【新年UI图标】秒杀icon
盲盒APP UI设计
UI通用设计素材1
【新年UI图标】30个图标
我的钱包-UI界面设计-app
户外旅行飞机情侣假日出行
高级感金属拟物 UI设计组件库
【新年UI图标】汽车icon
新能源APP应用UIKit
3D渐变流体抽象矢量UI背景图
【新年UI图标】会员icon
【新年UI图标】旅行icon
【新年UI图标】礼物/活动icon
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
【新年UI图标】体育icon
科技医疗透明柜UI界面设计
钱包ui模板
手表表盘UI系列
UI界面 组件
【新年UI图标】钱包icon
你可能喜欢
相关收藏夹
大家都在看
登录注册