看完w3cschool《css 教程》中的《css 圖像透明/不透明》，你對(duì) CSS 中的半透明顏色可能已經(jīng)有了基礎(chǔ)的了解，CSS透明算得上是一種相當(dāng)流行的技術(shù)，但在跨瀏覽器支持上，對(duì)于開發(fā)者來說，可以說是一件令人頭疼的事情。目前還沒有一個(gè)通用方法，以確保透明度設(shè)置可以在目前使用的所有瀏覽器上有效，但是總得來說它是一個(gè)巨大的變革。關(guān)于CSS 透明度，有一點(diǎn)需要注意的是，它雖然使用了很多年，但它一直以來都不是一個(gè)標(biāo)準(zhǔn)屬性，它是一種非標(biāo)準(zhǔn)技術(shù)，應(yīng)該是CSS3規(guī)范的一部分。
<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實(shí)現(xiàn)背景半透明效果？我們一般的做法是用兩個(gè)層，一個(gè)用于放文字，另一個(gè)用于做透明背景，因?yàn)橥该鳛V鏡的效果會(huì)影響到里面的內(nèi)容。
不過如果你只需求在IE下實(shí)現(xiàn)，使用CSS實(shí)現(xiàn)透明度有很多方案，這里只是介紹大家通用的方法：
1. .transparent_class {
2. filter:alpha(opacity=50);//標(biāo)準(zhǔn)的css透明度，在大部分的標(biāo)準(zhǔn)瀏覽器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";//針對(duì)所有通用瀏覽器
13. myDiv.style.filter ="alpha(opacity=40)";//針對(duì)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("動(dòng)畫完成");
6. });
7. });一、舊的Opacity設(shè)置
#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }
-khtml-opacity設(shè)置是針對(duì)舊版本的Webkit渲染引擎，這種專用屬性現(xiàn)在已經(jīng)過時(shí)了，除非你還有需要兼容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網(wǎng)，php教程，php學(xué)習(xí)，php手冊(cè)，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請(qǐng)聯(lián)系本站，謝謝！
粵ICP備14040726號(hào)-1?? 2015-2020 程序員人生 版權(quán)所有
