ホームページ >ウェブフロントエンド >CSSチュートリアル >子要素に影響を与えずにCSSで透明度を設定するにはどうすればよいですか?すべてのブラウザの書き込み方法と互換性があります
子要素に影響を与えずにCSSで透明度を設定するにはどうすればよいですか?すべてのブラウザの書き込み方法と互換性があります
- 云罗郡主転載
- 2018-10-18 15:58:223555ブラウズ
この記事で紹介する内容は、それに関するものであり、困っている友人が参考になれば幸いです。
<body> <p style="background-color:rgba(0,255,0,0.2);"> 显示文字 </p> </body>
RGBA を介して透明度を設定します。これをサポートしているのは最新のブラウザのみで、IE9 をサポートしており、RGBA のアルファ チャネルを通じて設定できます。
最初の 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 進数の透明度、最後の 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 進数変換メソッド: ; a.toString(16) = 40
例: 入力の透明度の設定は子要素に影響しません (IE8 と互換性があります)
<!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 サイトに注目してください。
以上が子要素に影響を与えずにCSSで透明度を設定するにはどうすればよいですか?すべてのブラウザの書き込み方法と互換性がありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。