CSS makes the background transparent text opaque: original by toyean

It is often used in some special effects or navigation transparent For example, for a lottery page I made, the background should be transparent and the text should not be transparent, but the background and text should be transparent at the same time. Here are my own solutions, which are compatible IE6 /IE7/IE8/Firefox/Safari。 The specific codes are as follows:

<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:" Microsoft Yahei "; 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/ ">Home page</a></span>

        </p>

    </li>

    <li>

        <p>

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

        </p>

    </li>

</ul>