CSS透明处理分析和总结(完整文档)

时间:2022-10-23 13:25:06 手机站 阅读量:

下面是小编为大家整理的CSS透明处理分析和总结(完整文档),供大家参考。

CSS透明处理分析和总结(完整文档)

 

 css 透明处理

 简 介 :

 {filter: alpha(opacity=#opacity,finishopacity=#finishopacity,style=#style,startx=#startx, starty=#starty,finishx=#finishx,finishy=#finishy)}

 具体参数含义如下:opacity

 透明度。默认的范围是从 0 到 1 ... {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)} 这个就是半透明的设置,只要把{}中的代码加入到需要设置的模版中的{}的即可,记得与前面的代码之间要用";"间隔,不然设置是无效的

 例如:

 我要设置模版区域背景的颜色(白色)+半透明[就是我现在 blog 的效果] 只要在 .modbox{} .modbl{} .modbc{} .modbr{} 中都设置background-color:white 这些就是模版背景设置的ID

 然后再在.modbox,.modbl,.modbc,.modbr{} 中加入filter : alpha(opacity=80)就可以达到所有模版的背景都是半透明的效果了

 如果希望像我这样只显示blog 的背景,别的都全透明的话,那么就在别的模版中加入背景全透明的代码即可 background:transparent 这就是背景全透明的代码

 各模版ID 请参照链接:百度空间CSS 说明

 不过这样的话,相关模版的主要区域是透明了,可是底下还会有一条颜色留着的,所以另外还要在 .modbl{} .modbc{} .modbr{} 中也加入背景全透明的代码,这样才能让模版区域完全透明,就像我现在的效果一样另外这个参数目前只能用于背景色的设置,背景图片无法设置为半透明

 我把我的背景半透明代码贴出来吧 .modbox{padding:10px 10px 0 10px;background-color:#FFFFFF;border-left:1px solid #813533;border-right:1px solid #813533} .modbl{background:transparent;border-left:1px solid #813533;border-bottom:1px solid #813533;line-height:1px} .modbc{background:transparent;border-bottom:1px solid #813533;line-height:1px} .modbr{background:transparent;;border-right:1px solid #813533;border-bottom:1px solid #813533;line-height:1px} .modbox,.modbl,.modbc,.modbr{filter:alpha(opacity=80);-moz-opacity:0.8;width:aut

 o !important;width:100%}

  红色字是关键设置,如果不想设置全透明的话,可以把.modbl{}.modbc{}.modbr{}三个中的 background:transparent 改成.modbox{}中的background-color:#FFFFFF,当然这里的#FFF

推荐访问:透明 完整 文档

版权声明 :以上文章中选用的图片文字均来源于网络或用户投稿 ,如果有侵权请立即联系我们 , 我们立即删除 。