分享

背景或者图片半透明

 卓君书馆 2011-11-29


让背景或者图片半透明有两种方法。

一种是用PS做半透明的PNG图片填充。


另一种就是用代码。
CSS中在希望半透明的部分后面添加如下代码。

filter: Alpha(opacity=10);
-moz-opacity:.1;
opacity:0.1;

句中的数字就是你希望半透明的程度,越小透明度越高。

其实就是添加一个滤镜。三句话中第一个是支持IE,第二个和第三个都是支持FireFox的不同版本。

比如说设置好背景图片之后想让Container部分半透明
直接添加在后面。
#container { margin:30px auto;
width:600px;
padding:10px;
text-align:left;
background:#fff;
filter: Alpha(opacity=80);
-moz-opacity:.8;
opacity:0.8; }

此时发现文章内容的图片也一并半透明了。如果想让字体及内容图片不透明。只需在Content中添加

position:relative;  就Ok。

如果只要一幅图片半透明。比如头图。只要在图片地址后面添加

fliter:alpha(opacity=50); 就ok。数字是透明度。

在日志中插入半透明图片也一样。编辑文章的时候打开HTML编辑。插入以下。

方法一。

<img style="filter:alpha(opacity=起始透明度, finishOpacity=结束透明度,style=滤镜样式)" height=306 src="图片地址" width=宽度 height=高度 align=定位>

起始透明度和结束透明度都是1-100数值。麻烦点就是宽度高度要自己定。
align就是定位。居左left。居右right。居中center。
style是滤镜样式。0均匀。1线状。2圆形。3长方形。

方法二。免调大小。

<img src="图片地址" style="filter:alpha(opacity=起始透明度, finishOpacity=结束透明度,style=滤镜样式)">

参数同上。

我自己试了下。同样参数MS方法二比方法一明显。

但是。以上两种方法的滤镜样式效果MS只支持IE。在Firefox之下是没有差别的——统统是半透明。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多