<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /><html xmlns="http://www.w3.org/1999/xhtml"><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>小魔出品</title><br /><style><br />body {background:url(http://www.google.com.hk/intl/zh-CN/images/logo_cn.png) 0 0 repeat;}<br />* {margin:0;padding:0;}<br />.Boxer {width:600px;height:400px;overflow:hidden;margin:0 auto;border:6px solid red;}<br />.Opacity {<br />height:400px;<br />background-color:rgba(0,0,0,0.5); /*標準瀏覽器 只需這句*/<br />background-color:#000\9; /*IE 系列*/<br />filter:alpha(opacity=50); /*IE 系列*/<br />/*<br /> 作為透明背景的層，不可以有 position 屬性，不知為何。。。<br /> 。<br /> background-color:rgba(0,0,0,0.5) 這句，IE6貌似能讀懂一小部分，我艸了。所以只能將background-color:#000 寫在其後，然後加個IE的專有Hack。<br /> 不信可以寫一個試試看<br /> background-color:#000;background-color:rgba(0,0,0,0.5);filter:alpha(opacity=50);<br /> IE6會讓你蛋疼的！<br />*/<br />}<br />.BoxerInner {position:relative; /*IE 系列*/<br />text-align:center;font-size:24px;font-weight:700;color:yellow;}<br /></style><br /></head><br /><body><br /><p style="font-size:60px;color:#000;text-align:center;padding:20px;font-weight:700;">Css:背景色透明，內容不透明之終極方法！相容，終極。</p><br /><div class="Boxer"><br /><div class="Opacity"><br /> <div class="BoxerInner">BoxerInner</div><br /></div><br /></div><br /></body><br /></html><br />
運行代碼
