5

マウスが上にあるかどうかに応じて、背景色の不透明度を変更したい DIV があります。

なども使えると思いますがbackground: rgba(54, 25, 25, .5)、色は別途設定したいです。色ではなく不透明度を変更する方法はありますか。

などもできますがopacity: 0.3、それは DIV 全体に影響し、背景色に影響を与えたいだけです。

4

6 に答える 6

4

別の背景部分を作成し、divその不透明度を設定divできます。

<div id="container">
    <div id="background"></div>
    <div id="content">
        <p>Lorum ipsum...</p>
    </div>
</div>

と

#container { overflow:hidden; position:relative; }
#background { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background:#FF0000;
}
#background:hover { opacity:0.3; }
#content { position:relative; z-index:10; }
于 2012-04-30T18:16:24.787 に答える
4

html/cssにはそのオプションが組み込まれていませんが、javascriptで色にアクセス/設定しているため、それを処理できる独自の関数を追加することもできます。

以下に例を示します。

<script type="text/javascript">
function RGBA(red,green,blue,alpha) {
    this.red = red;
    this.green = green;
    this.blue = blue;
    this.alpha = alpha;
    this.getCSS = function() {
        return "rgba("+this.red+","+this.green+","+this.blue+","+this.alpha+")";
    }
}

// store a copy of the color
var bgColor = new RGBA(255,0,0,0.5);

function setBgOpacity(elem, opac) {
    bgColor.alpha = opac;
    elem.style.backgroundColor = bgColor.getCSS();
}
</script>

次に、HTML でonmouseoverイベントを使用して bgColor の不透明度を変更します。

<div onmouseover="setBgOpacity(this, '0.3');"
     onmousout="setBgOpacity(this, '0.5');">Put your mouse over me</div>
于 2012-04-30T18:25:46.680 に答える
2

RGBa と Opacity の Alpha 値に違いがあります。不透明度はすべての子要素に影響しますが、アルファには影響しません。

現在の色の値を読み取ってから、新しいアルファ値で RGBa として言い換える必要があります。これを行うには、現在の 16 進カラー値を 10 進トリプレットに変換する必要がある場合があります。

于 2012-04-30T18:12:04.387 に答える
1

背景色の不透明度を変更するために RGBA に依存している場合、色自体とは別に不透明度を設定する方法はありません。通常の状態とホバー状態の両方に対して明示的な RGBA 値を宣言する必要があります。

于 2012-04-30T18:12:06.823 に答える
1

いいえ、rgba のアルファのみを編集することはできません。したがって、のRGB部分を使用する必要がありRGBaます。

于 2012-04-30T18:12:42.897 に答える