ホームページ > 記事 > ウェブフロントエンド > 子要素に影響を与えずにCSSで透明度を設定する方法
子要素に影響を与えずにCSSで透明度を設定する方法
- 王林転載
- 2020-08-11 16:56:303223ブラウズ
RGBA による透明度の設定は最新のブラウザでのみサポートされ、IE9 をサポートし、RGBA のアルファ チャネルを通じて設定できます。
(推奨チュートリアル: CSS チュートリアル)
<body> <div style="background-color:rgba(0,255,0,0.2);"> 显示文字 </div> </body>
最初の 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は完全に不透明です。値の範囲外の値はデフォルト値に戻ります。
(推奨ビデオチュートリアル: css ビデオチュートリアル)
2 桁の透明度変換方法: x=alpha*255、計算結果 x を 16 進数に変換するだけです。
JS の 16 進数変換方法: ; a.toString(16) = 40
例:
<!DOCTYPE html>
<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>以上が子要素に影響を与えずにCSSで透明度を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。