DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS3基礎 >> 6.1 透明度opacity屬性
6.1 透明度opacity屬性
編輯:CSS3基礎     

一、opacity屬性

在CSS3中,我們可以使用opacity屬性來控制元素的透明度。

語法:

opacity:數值;

說明:

opacity屬性取值范圍為0.0~1.0,0.0表示完全透明,1.0表示完全不透明(默認值)。

opacity屬性取值不可以為負數。

舉例:

在線測試
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 opacity屬性</title>
    <style type="text/css">
        a
        {
            display:inline-block;
            padding:5px 10px;
            font-family:微軟雅黑;
            color:white;
            background-color:#45B823;
            border-radius:4px;
            cursor:pointer;
        }
        a:hover
        {
            opacity:0.8;
        }
    </style>
</head>
<body>
    <a>調試代碼</a>
</body>
</html>

在浏覽器預覽效果如下:

分析:

我們在“在線測試工具”中為div層加上“opacity:0.5;”這句屬性,在浏覽器預覽效果如下:

大家可以看到,加上了“opacity:0.8”屬性之後,元素的透明度增加了。如果加上“opacity:1.0”則元素會變得完全透明。大家可以嘗試修改測試一下。

透明度opacity屬性用得也比較廣泛,很多時候都是配合:hover偽類來定義鼠標移動到某個按鈕或圖片上時,改變透明度來呈現動態的效果。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved