在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偽類來定義鼠標移動到某個按鈕或圖片上時,改變透明度來呈現動態的效果。