子要素に影響を与えずにCSSで透明度を設定するにはどうすればよいですか?すべてのブラウザの書き込み方法と互換性があります-CSSチュートリアル-php.cn

子要素に影響を与えずにCSSで透明度を設定するにはどうすればよいですか?すべてのブラウザの書き込み方法と互換性があります

云罗郡主

リリース： 2018-10-18 16:02:15

転載

3643 人が閲覧しました

この記事で紹介する内容は、それに関するものであり、困っている友人が参考になれば幸いです。

子要素に影響を与えずにCSSで透明度を設定するにはどうすればよいですか?すべてのブラウザの書き込み方法と互換性があります

<body>
<p style="background-color:rgba(0,255,0,0.2);"> 显示文字 
</p> 
</body>

ログイン後にコピー

RGBA を介して透明度を設定します。これをサポートしているのは最新のブラウザのみで、IE9 をサポートしており、RGBA のアルファチャネルを通じて設定できます。
最初の 3 つの値は RGB カラー値で、最後の透明度の値の範囲は 0 ～ 1 です。値が小さいほど透明度が高くなります。

すべてのブラウザに対応記述方法:

1 2	`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>