CSS透明opacity和IE各版本透明度濾鏡filter的兼容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .transparent_class {
            /* Required for IE 5, 6, 7 */
            /* ...or something to trigger hasLayout, like zoom: 1; */
            width: 300px;
            height: 300px;
            line-height: 300px;
            text-align: center;
            background: red;
            color: #fff;
            /* older safari/Chrome browsers */
            -webkit-opacity: 0.5;
            /* Netscape and Older than Firefox 0.9 */
            -moz-opacity: 0.5;
            /* Safari 1.x (pre WebKit!) 老式khtml內核的Safari瀏覽器*/
            -khtml-opacity: 0.5;
            /* IE9 + etc...modern browsers */
            opacity: .5;
            /* IE 4-9 */
            filter: alpha(opacity=50);
            /*This works in IE 8 & 9 too*/
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
            /*IE4-IE9*/
            filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
        }
    </style>
</head>
<body>
<div class="transparent_class">測試透明度</div>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章