前台特效（1）鼠标改变透明度

转载于 2013-03-06 21:13:00 发布 · 120 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/longdidi/archive/2013/03/06/2946959.html

文章标签：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>透明度</title>
        <style type="text/css">
            .one {
                height: 790px;
                width: 915px;
                position: relative;
            }
            .one a {
                display: block;
                position: absolute;
                left: 0px;
                top: 0px;
                height: 790px;
                width: 915px;
                z-index: 3;
                /*兼容ie与firefox*/
                opacity: 0.4;
                filter:alpha(opacity=40);
                background-color: #999999;
            }
            .one img {
                z-index: 1;

            }
            .one a:hover {
                opacity: 0;
                filter:alpha(opacity=0);
            }
        </style>
    </head>

    <body>
        <div class="one">
            <img src="./1.jpg"/><a href="#"></a>
        </div>
    </body>
</html>