在css中,可以使用opacity屬性設定圖片的透明度,語法“opacity:數值”,其中數值範圍在“0.0-1.0”之間;當數值為1時表示完全不透明,當數值為0.5時表示半透明,當數值為0時表示完全透明。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
圖片透明度設定
.opacity img{opacity: 0.5;}
程式碼和效果圖片如下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { background:url(../images/bg.jpg) no-repeat; } .opacitybox{ width: 400px; height: 200px; margin:0 auto; margin-top:320px; } .opacity img{ opacity: 0.5; } </style> </head> <body> <div class= "opacitybox opacity"> <img src="../images/img.jpg" alt="" width="100%"> </div> </body> </html>
推薦學習:css影片教學
以上是css如何設定圖片透明度的詳細內容。更多資訊請關注PHP中文網其他相關文章!