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

在做某些特效或者导航时常常会用到透明效果，比如我做的一个抽奖页面，要求背景透明文字不透明，但往往会遇到背景和文字同时透明的问题，下面是我自创的解决方法，兼容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(https://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="https://www.toyean.com/">首 页</a></span>

        </p>

    </li>

    <li>

        <p>

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

        </p>

    </li>

</ul>