透明度和背景透明---opacity&transparent

本文轉載自查看原文 2012-02-01 16:49 5565 css/html

1、透明度
opacity: 0.3;
filter:alpha(opacity=30);
opacity設置透明度，后代元素會繼承當前元素的透明度。
效果如下圖：

<!DOCTYPE html> <html> <head> <title>透明度---opacity---www.cnblogs.com/kuikui</title> <style type="text/css"> .test { width: 500px; height: 300px; text-align: center; line-height: 300px; font-size: 50px; opacity: 0.3; filter:alpha(opacity=30); background: red; } </style> </head> <body> <div class="test"> 測試。。。 </div> </body> </html>

2、背景透明
  background-color: rgba(255,0,0,0.3);
前三個參數代表rgb數值，最后一個參數代表透明度
background: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#50ff0000,endColorstr=#50ff0000);
  zoom: 1;
50ff0000：前兩位代表透明度，后面六位分表代表rgb的數值。
效果如下圖：

<!DOCTYPE html> <html> <head> <title>背景明度---transparent---www.cnblogs.com/kuikui</title> <style type="text/css"> .test { width: 500px; height: 300px; text-align: center; line-height: 300px; font-size: 50px; background: transparent; background-color: rgba(255,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#50ff0000,endColorstr=#50ff0000); zoom: 1; } </style> </head> <body> <div class="test"> 測試。。。 </div> </body> </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 opacity(透明度)屬性設置 CSS 透明度級別及背景透明 css 背景顏色透明度如何設置一個div的背景透明度 css設置背景透明度 Hexo之更換背景及透明度 CSS中的opacity，不透明度的坑 CSS opacity設置不透明度 CSS 之 Opacity多瀏覽器透明度兼容處理 css父元素透明度（opacity）對子元素的影響