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>