css透明度を設定してサブ要素に影響しない
5214 ワード
<body>
<div style="background-color:rgba(0,255,0,0.2);">
div>
body>RGBAで透明度を設定し、最新のブラウザのみでサポートされ、IE 9+をサポートし、RGBAのalphaチャネルで設定できます.最初の3つの値はrgbの色値で、最後の透明度の値は0~1で、値が小さいほど透明になります.
すべてのブラウザの書き方に対応:
background-color:rgba(0,0,0,0.25);
filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#40000000,endColorstr=#40000000);注:startColorStrとendColorStrの値は、最初の2つが16進数の透明度で、後ろの6つが16進数の色です.
その形式は#AARRGGBBです.AA、RR、GG、BBは16進数の正の整数である.値範囲は00-FFです.RRは赤色値、GGは緑色値、BBは青色値を指定し、#RRGGBB色単位を参照.AA透明度を指定します.00は完全に透明です.FFは完全に不透明です.値範囲外の値はデフォルト値に戻ります.
2ビット透明度の換算方法:x=alpha*255、計算結果xを16進数に変換すればよい.
js換算16進法:x.toString(16)
例えば、上の0.25透明度、IE換算AA透明度:var a=0.25*255=63.75~=64;a.toString(16) = 40
例:inputに透明度を設定してもサブエレメントには影響しません(互換性IE 8)
<head>
<meta charset="utf-8"/>
<style type="text/css">
body{margin:0;padding:0;}
.div_content{
background: url("1.gif") no-repeat;
/* input ， 。*/
width: 200px;
height: 200px;
}
.div_content>input{
outline: none;
border: none;
background-color: transparent;
/* ， 。（ ， ：span ）*/
background-color: rgba(0,0,0,0.25);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#40000000,endColorstr=#40000000);
}
style>
head>
<body>
<div class="div_content">
<input type="text" size="20"/>
div>
body>
html>