首頁 >web前端 >css教學 >實現CSS3不透明度完整代碼

實現CSS3不透明度完整代碼

高洛峰原創: 2017-03-20 10:45:282705瀏覽

如何設定透明度？定義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不透明度完整代碼

CSS設定一個元素半透明

CSS3教學(8):CSS3透明度指南

CSS3中使用RGBa來調節透明度的範例說明

以上是實現CSS3不透明度完整代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：詳解CSS3 RGBA色彩模式使用實例程式碼下一篇：詳解CSS3 RGBA色彩模式使用實例程式碼

看更多