編程教程CSS 透明度設置方法及常見問題解析
看完 w3cschool《css 教程》中的《css 圖像透明/不透明》，你對 CSS 中的半透明顏色可能已經有了基礎的了解，CSS 透明算得上是一種相當流行的技術，但在跨瀏覽器支持上，對于開發者來說，可以說是一件令人頭疼的事情。目前還沒有一個通用方法，以確保透明度設置可以在目前使用的所有瀏覽器上有效，但是總得來說它是一個巨大的變革。關于 CSS 透明度，有一點需要注意的是，它雖然使用了很多年，但它一直以來都不是一個標準屬性，它是一種非標準技術，應該是 CSS3 規范的一部分。
怎樣在CSS樣式中設置背景的透明度
實例
.box{
width:300px;
height:200px;
margin:0 auto;
boxder:1px solid #ccc;
background:#000;
filter:alpha(opacity:30);
opacity:0.3;
color:red;}
其他的屬性介紹如下:
opacity: 0.3；這是“最重要的”，因為它是在 CSS 的現行標準。這將在 Firefox，Safari 和 Opera 的大多數版本的工作。這將是你所需要的一切如果所有的瀏覽器都支持目前的標準。當然是他們不會錯。
filter:alpha(opacity=30);這一個是針對IE瀏覽器
-moz-opacity:0.3;你需要這一個支持老版本的 Mozilla 瀏覽器如 Netscape Navigator。
-khtml-opacity: 0.3;這是舊版本的 Safari（1.×）當渲染引擎是使用仍被稱為 kthml，而不是目前的WebKit。
CSS 中用 javascript 或 jquery 實現透明度的改變
如何用 CSS 實現背景半透明效果？我們一般的做法是用兩個層，一個用于放文字，另一個用于做透明背景，因為透明濾鏡的效果會影響到里面的內容。
不過如果你只需求在 IE 下實現，使用 CSS 實現透明度有很多方案，這里只是介紹大家通用的方法：
.transparent_class {
filter:alpha(opacity=50);//標準的css透明度，在大部分的標準瀏覽器Firefox, Safari, and Opera都有效
opacity:0.5;//兼容IE解決方案
-moz-opacity:0.5;//老的Mozilla browsers如NetscapeNavigator.幾乎沒有可以不需要
-khtml-opacity:0.5;//兼容老的Safari (1.x) 版本,很少可以不用 }
實例
<script>
window.onload =function(){
var myDiv = document.getElementById("transparent_div");
myDiv.onclick =function(){
myDiv.style.opacity =".4";//針對所有通用瀏覽器
myDiv.style.filter ="alpha(opacity=40)";//針對IE瀏覽器}}
</script>
實例
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({opacity:"0"});});
$("#btn2").click(function(){
$("#box").animate({opacity:"1"});});});
CSS透明技巧匯總
一、舊的Opacity設置
#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }
-khtml-opacity 設置是針對舊版本的Webkit渲染引擎，這種專用屬性現在已經過時了，除非你還有需要兼容Safari 1.x.的用戶。
#myElement { opacity: 0.7; }
三、IE下的CSS透明度
#myElement { filter: alpha(opacity=40); }
另外一個設置IE8的CSS透明度的方法語法如下：
#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
/* 第一行在IE6, IE7和IE8下有效 */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity=40)”;
/*第二行僅在IE8下有效 */}
注意兩行代碼的不同之處：在第二行代碼中，在filter屬性前跟著-ms-前綴，并且屬性值有加引號，這些都是語法所必須的。
CSS 如何值改變背景透明的，不改變子元素透明度？
實例
<div style="opacity:0.4; background-image:url(/statics/images/w3c/intro.png)">
方法1：使用一張透明的圖片做背景可以達成效果，但是有沒有更簡單的方法呢？
方法2：使用 RGBA。
實例
<div style="background-color:rgba(0, 0, 0, 0.4)">
CSS在設置了透明度的層里，怎么讓里面的層不透明
實例
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
如果是圖片，就用 ps 簡單處理一下即可。
opacity 這個屬性指定的透明是包括里面的元素的，不可能只有外面透明，里面不透明
css里邊寫透明樣式怎么寫
style="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，FinishX=finishX，FinishY=finishY)"
Opacity：起始值，取值為0～100, 0為透明，100為原圖。
FinishOpacity：目標值。
Style：1或2或3
StartX：任意值
StartY：任意值
語法如下：
filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")