實現CSS3不透明度完整代碼-css教學-PHP中文網

實現CSS3不透明度完整代碼

高洛峰

發布： 2017-03-20 10:45:28

原創

2646 人瀏覽過

如何設定透明度？定義opacity屬性，透過設定此屬性能夠使任何元素呈現半透明效果，opacity屬性的基本語法如下：

|inherit

#取值說明：

1、|是由浮點數和單位識別碼組成的長度值。不可為負值，預設值為1.opacity取值為1時，則元素為完全不透明的；反之，取值為0時，元素是完全透明的，不可見。

2、inherit表示繼承，即繼承父元素的不透明性。

3、針對IE瀏覽器，可以使用它的私有屬性filter來相容：filter：alpha（alpha=value）；。

範例：設計燈箱廣告背景布

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>opacity</title>  
<style type="text/css">  
body {   
    margin:0;   
    padding:0;   
}   
p { position:absolute; }   
.bg {   
    width:100%;   
    height:100%;   
    background:#000;   
    opacity:0.7;   
    filter:alpha(opacity=70);   
}   
.lightbox {   
    left:50px;   
    top:50px;   
}   
</style>  
</head>  
  
<body>  
<p class="web"><img  src="images/web_bg_9.jpg"    style="max-width:90%"  style="max-width:90%" / alt="實現CSS3不透明度完整代碼" ></p>  
<p class="bg"></p>  
<p class="lightbox"><img  src="images/web_bg_10.png"    style="max-width:90%" / alt="實現CSS3不透明度完整代碼" ></p>  
</body>

登入後複製

示範效果圖：

實現CSS3不透明度完整代碼