免費(fèi)AI編程助手
CSS 透明度設(shè)置方法及常見(jiàn)問(wèn)題解析
看完 w3cschool《css 教程》中的《css 圖像透明/不透明》，你對(duì) CSS 中的半透明顏色可能已經(jīng)有了基礎(chǔ)的了解，CSS 透明算得上是一種相當(dāng)流行的技術(shù)，但在跨瀏覽器支持上，對(duì)于開發(fā)者來(lái)說(shuō)，可以說(shuō)是一件令人頭疼的事情。目前還沒(méi)有一個(gè)通用方法，以確保透明度設(shè)置可以在目前使用的所有瀏覽器上有效，但是總得來(lái)說(shuō)它是一個(gè)巨大的變革。關(guān)于 CSS 透明度，有一點(diǎn)需要注意的是，它雖然使用了很多年，但它一直以來(lái)都不是一個(gè)標(biāo)準(zhǔn)屬性，它是一種非標(biāo)準(zhǔn)技術(shù)，應(yīng)該是 CSS3 規(guī)范的一部分。
怎樣在CSS樣式中設(shè)置背景的透明度
實(shí)例
.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；這是“最重要的”，因?yàn)樗窃?CSS 的現(xiàn)行標(biāo)準(zhǔn)。這將在 Firefox，Safari 和 Opera 的大多數(shù)版本的工作。這將是你所需要的一切如果所有的瀏覽器都支持目前的標(biāo)準(zhǔn)。當(dāng)然是他們不會(huì)錯(cuò)。
filter:alpha(opacity=30);這一個(gè)是針對(duì)IE瀏覽器
-moz-opacity:0.3;你需要這一個(gè)支持老版本的 Mozilla 瀏覽器如 Netscape Navigator。
-khtml-opacity: 0.3;這是舊版本的 Safari（1.×）當(dāng)渲染引擎是使用仍被稱為 kthml，而不是目前的WebKit。
CSS 中用 javascript 或 jquery 實(shí)現(xiàn)透明度的改變
如何用 CSS 實(shí)現(xiàn)背景半透明效果？我們一般的做法是用兩個(gè)層，一個(gè)用于放文字，另一個(gè)用于做透明背景，因?yàn)橥该鳛V鏡的效果會(huì)影響到里面的內(nèi)容。
不過(guò)如果你只需求在 IE 下實(shí)現(xiàn)，使用 CSS 實(shí)現(xiàn)透明度有很多方案，這里只是介紹大家通用的方法：
.transparent_class {
filter:alpha(opacity=50);//標(biāo)準(zhǔn)的css透明度，在大部分的標(biāo)準(zhǔn)瀏覽器Firefox, Safari, and Opera都有效
opacity:0.5;//兼容IE解決方案
-moz-opacity:0.5;//老的Mozilla browsers如NetscapeNavigator.幾乎沒(méi)有可以不需要
-khtml-opacity:0.5;//兼容老的Safari (1.x) 版本,很少可以不用 }
實(shí)例
<script>
window.onload =function(){
var myDiv = document.getElementById("transparent_div");
myDiv.onclick =function(){
myDiv.style.opacity =".4";//針對(duì)所有通用瀏覽器
myDiv.style.filter ="alpha(opacity=40)";//針對(duì)IE瀏覽器}}
</script>
嘗試一下 ?
實(shí)例
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({opacity:"0"});});
$("#btn2").click(function(){
$("#box").animate({opacity:"1"});});});
嘗試一下 ?
CSS透明技巧匯總
一、舊的Opacity設(shè)置
#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }
-khtml-opacity 設(shè)置是針對(duì)舊版本的Webkit渲染引擎，這種專用屬性現(xiàn)在已經(jīng)過(guò)時(shí)了，除非你還有需要兼容Safari 1.x.的用戶。
#myElement { opacity: 0.7; }
三、IE下的CSS透明度
#myElement { filter: alpha(opacity=40); }
另外一個(gè)設(shè)置IE8的CSS透明度的方法語(yǔ)法如下：
#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
/* 第一行在IE6, IE7和IE8下有效 */
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(opacity=40)”;
/*第二行僅在IE8下有效 */}
注意兩行代碼的不同之處：在第二行代碼中，在filter屬性前跟著-ms-前綴，并且屬性值有加引號(hào)，這些都是語(yǔ)法所必須的。
CSS 如何值改變背景透明的，不改變子元素透明度？
方法1：使用一張透明的圖片做背景可以達(dá)成效果，但是有沒(méi)有更簡(jiǎn)單的方法呢？
方法2：使用 RGBA。
CSS在設(shè)置了透明度的層里，怎么讓里面的層不透明
但在此層里面的層都透明了，怎么讓里面的層不透明？
如果是圖片，就用 ps 簡(jiǎn)單處理一下即可。
opacity 這個(gè)屬性指定的透明是包括里面的元素的，不可能只有外面透明，里面不透明
css里邊寫透明樣式怎么寫
style="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity，Style=style, StartX=startX，StartY=startY，F(xiàn)inishX=finishX，F(xiàn)inishY=finishY)"
Opacity：起始值，取值為0～100, 0為透明，100為原圖。
FinishOpacity：目標(biāo)值。
Style：1或2或3
StartX：任意值
StartY：任意值
語(yǔ)法如下：
filter:Alpha(Opacity="0",FinishOpacity="75",Style="2")
更多建議：