公告:拓源网2017年春节放假时间为1月16日—2月16日,主题业务请联系客服 给您带来不便之处敬请谅解。祝大家新年快乐!
首页 > web前端 > CSS使背景透明文字不透明的方法:toyean原创

CSS使背景透明文字不透明的方法:toyean原创

2011-06-24 toyean web前端 人评论 3283人浏览

在做某些特效或者导航时常常会用到透明效果,比如我做的一个抽奖页面,要求背景透明文字不透明,但往往会遇到背景和文字同时透明的问题,下面是我自创的解决方法,兼容IE6/IE7/IE8/Firefox/Safari。具体代码如下:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>transparent--by:toyean</title>

<style>

body { background:url(http://www.toyean.com/zb_users/upload/map.jpg) no-repeat center top; }

ul { list-style:none; }

ul li { width:100px; height:50px; position:relative; display:inline; float:left; margin:5px; }

ul li span { width:100px; height:50px; position:absolute; top:0px; left:0px; float:left; background:#000; filter: Alpha(Opacity=50, Style=0); opacity: 0.50; }

ul li font a { width:100px; height:50px; text-align:center; text-decoration:none; font-size:24px; font-family:"微软雅黑"; line-height:50px; display:block; position:absolute; left: 58px; color:#fff; top: 20px; top:0px; left:0px; }

ul li font a:hover { color:#F60; background:#000;}</style>

<ul class=" list-paddingleft-2">

    <li>

        <p>

            <span><a href="http://www.toyean.com/">首 页</a></span>

        </p>

    </li>

    <li>

        <p>

            <span><a href="http://www.toyean.com/guestbook.html">留 言</a></span>

        </p>

    </li>

</ul>