css降低背景透明度的方法:1、使用opacity屬性,只需為背景元素設定「opacity: 透明度值;」樣式即可;2、使用filter屬性,只需為背景元素設定「filter : opacity(透明度值);”樣式即可。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
css降低背景透明度
#方法1:使用opacity屬性
Opacity屬性設定一個元素了透明度等級。從0.0(完全透明)到1.0(完全不透明)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> #box{ width: 300px; height: 300px; background-color: red; opacity: 0.4; } </style> </head> <body> <div id="box"></div> </body> </html>
#方法2:使用filter屬性
filter 屬性定義了元素的可視效果(例如:模糊與飽和度)。
opacity(%)可轉換影像的透明程度。值定義轉換的比例。值為0%則為完全透明,數值為100%則影像無變化。值在0%和100%之間,則是效果的線性乘子,也相當於影像樣本乘以數量。若值未設置,值預設為1。函數與現有的opacity屬性很相似,不同之處在於透過filter,有些瀏覽器為了提升效能會提供硬體加速。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> #box{ width: 300px; height: 300px; background-color: red; filter: opacity(0.3); } </style> </head> <body> <div id="box"></div> </body> </html>
(學習影片分享:css影片教學)
以上是css怎麼降低背景透明度的詳細內容。更多資訊請關注PHP中文網其他相關文章!