CSS教程：文字半透明效果的实现方法

发布时间：2018-08-17 19:09:51 所属栏目：经验来源：站长网

导读：烈火建站学院（LieHuo.Net）CSS文档如何用CSS实现背景半透明效果？做过活动页面的同学可能会遇到要做背景半透明的效果，我们一般的做法是用两个层，一个用于放文字，另一个用于做透明背景，因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下

　烈火建站学院（LieHuo.Net）CSS文档如何用CSS实现背景半透明效果？做过活动页面的同学可能会遇到要做背景半透明的效果，我们一般的做法是用两个层，一个用于放文字，另一个用于做透明背景，因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下实现，我们有更简单的做法：

　我们看一下效果演示，请点击运行代码：

<html> <head> <title>烈火建站学院 www.veryhuo.com</title> <style> .alpha1,.alpha2{ width:100%; height:auto; min-height:250px;/* 必需 */ _height:250px;/* 必需 */ overflow:hidden; background-color:#FF0000;/* 背景色 */ } .alpha1{ filter:alpha(opacity=20); /* IE 透明度20% */ } .alpha2{ background-color:#FFFFFF; -moz-opacity:0.8; /* Moz + FF 透明度20%*/ opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）透明度20%*/ } .ap2{ position:absolute; } </style> </head> <body> <div class="alpha1"> <div class="ap2"> <p>烈火建站学院 www.veryhuo.com 背景为红色(#FF0000)，透明度20%。</p> </div> <div class="alpha2"></div> </div> </body> </html>
烈火建站学院(liehuo.net)提示：可修改部分代码后运行！

（编辑：威海站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

元宇宙大爆炸，虚拟偶	从科教大市迈向科创强
摩尔线程首颗国产全功	安徽省博士后创新创业