看完w3cschool《css 教程》中的《css 圖像透明/不透明》，你對 CSS 中的半透明顏色可能已經有了基礎的了解，CSS透明算得上是一種相當流行的技術，但在跨瀏覽器支持上，對于開發者來說，可以說是一件令人頭疼的事情。目前還沒有一個通用方法，以確保透明度設置可以在目前使用的所有瀏覽器上有效，但是總得來說它是一個巨大的變革。關于CSS 透明度，有一點需要注意的是，它雖然使用了很多年，但它一直以來都不是一個標準屬性，它是一種非標準技術，應該是CSS3規范的一部分。
<div class="box"></div>
<style>
.box{width:300px; height:200px; margin:0 auto; boxder:1px solid #ccc; background:#000; filter:alpha(opacity:30); opacity:0.3; -moz-opacity:0.3;-khtml-opacity: 0.3}
</style>如何用CSS實現背景半透明效果？我們一般的做法是用兩個層，一個用于放文字，另一個用于做透明背景，因為透明濾鏡的效果會影響到里面的內容。
不過如果你只需求在IE下實現，使用CSS實現透明度有很多方案，這里只是介紹大家通用的方法：
1. .transparent_class {
2. filter:alpha(opacity=50);//標準的css透明度，在大部分的標準瀏覽器Firefox, Safari, and Opera都有效
3. opacity:0.5;//兼容IE解決方案
4. -moz-opacity:0.5;//老的Mozilla browsers如NetscapeNavigator.幾乎沒有可以不需要
5. -khtml-opacity:0.5;//兼容老的Safari (1.x) 版本,很少可以不用
6. }
1. <html>
2. <head>
3. <title></title>
4. <metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
5. <style>
6. div{width:100px;height:100px;background-color:red}
7. </style>
8. <script>
9. window.onload =function(){
10. var myDiv = document.getElementById("transparent_div");
11. myDiv.onclick =function(){
12. myDiv.style.opacity =".4";//針對所有通用瀏覽器
13. myDiv.style.filter ="alpha(opacity=40)";//針對IE瀏覽器
14. }
15. }
16. </script>
17. </head>
18. <body>
19. <divid="transparent_div">this istransparent div</div>
20. </body>
21.</html>
1. $("#transparent_div").css({ opacity:.4});
1. $("#transparent_div").click(function(){
2. $("#transparent_div").animate({
3. opacity:.4
4. },1000,function(){
5. alert("動畫完成");
6. });
7. });一、舊的Opacity設置
#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }
-khtml-opacity設置是針對舊版本的Webkit渲染引擎，這種專用屬性現在已經過時了，除非你還有需要兼容Safari 1.x.的用戶。
#myElement { opacity: .7; }
#myElement { filter: alpha(opacity=40); }
#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
/* 第一行在IE6, IE7和IE8下有效 */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity=40)”;
/*第二行僅在IE8下有效 */}
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
顯示文字
</div>
</div>
div style="background-color:rgba(0, 0, 0, 0.4)">
<div>
顯示文字
</div>
</div>
opacity: 0.8;
-moz-opacity: 0.8;
filter: alpha(opacity=80);
filter:Alpha(Opacity="0",FinishOpacity="75",Style="2") 程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
