簡單css代碼實現背景透明 -文字不透明支持ie和火狐(FF)-智軟工作室

智軟工作室主要是為寧波公司提供寧波網站建設,寧波網站制作,寧波做網站公司，寧波外貿網站建設公司,寧波網站優化等項目,以優質的服務，優惠的價格，深的客戶信賴。相信有你的加入我們的明天會更有動力！期待與你合作！

2014已經悄然到來，在新的一年我們恭賀所有客戶事業蒸蒸日上，同事慶祝智軟設計工作室成立5周年，在5周年為眾多客戶提供了保質量的網站設計與網站制作。我們在新的一年質量與服務將會更加進一步為更多的客戶帶來高端的網站設計與服務！期待與你合作
智軟設計工作室多年為寧波企業網站制作建設服務一直以來我們以最優惠價格，最優質的質量，最突出的設計！得到了客戶的一致認可,我們的服務包括：寧波網站設計,寧波網站建設,寧波網站制作,寧波網站優化,寧波英文網站制作我們會以優質的服務,最低的價格來報答客戶!
點擊連接網站優化推廣-對企業的網站優化和網站推廣--對企業的重要性-點擊進行詳細了解
2014開幕，寧波智軟設計為寧波企業提供更加優秀的設計和實惠的價格
智軟設計工作為寧波客戶網站設計案例展示平臺-案例均為定期更新，讓新老客戶更好的看到我們做的案例，點擊查看我們做的網站案例吧！
智軟(寧波網絡公司)幫你輕松解決網絡問題，網站一站式解決方案

你當前的位置：智軟工作室 > 營銷與網絡 >

簡單css代碼實現背景透明 -文字不透明支持ie和火狐(FF)

2011-08-13 03:15

這幾天公司很忙。好幾個單子都堆在一起在做。最近這幾個單子都是細節修改較多。有的時候感覺做網站越來越累了。

這幾個客戶都談的比較爽快。還是一步一步幫他們修改。其中有一家客戶需要修改的下拉菜單的背景顏色要透明。

我第一想到的就是 css做。然后就找了下資料。發現透明我們直接用：filter:alpha(opacity=50); 然后就寫了下，然后測試

發下IE 可以了。就此以為解決了。但是用火狐打開了一下。發現沒透明。郁悶。兼容有問題。又接著找資料。發現火狐透明是用：

opacity:0.5; 然后測試了。OK解決了。下面貼出完整的代碼和效果圖：

css透明背景代碼如下：

<!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>css透明背景代碼測試</title>
</head>

<body>

</div>
</body>
</html>

但是大家在做欄目背景透明的時候。會發現。他會和字一起透明了。所有就要用到特定的css 寫。用幾個絕對層來寫！

代碼如下：

<html>
<title>css透明代碼</title>
<head>
<style>
#container {
color: #154BA0;
background: #ff0000;
filter: Alpha(Opacity=10, Style=0);
opacity: 0.10;
position: absolute;
height: 200px;
width:500px;
z-index:20;
}

#text {
position: absolute;
height: 200px;
width:500px;
text-align:center;
z-index:30;
}
</style>
</head>
<body >
<div id="container"></div>
<div id="text">背景半透明但文字不透明</div>
</body>
</html>