web-dev-qa-db-ja.com

CSSで背景色の不透明度を変更する方法

透明な領域に背景色を付けるPNGファイルがありますが、不透明度のように背景色を少し透明にしたいと思います。ここに私のコードがあります：

social img{
    opacity:0.5;
}
.social img:hover {
    opacity:1;
    background-color:black;
}
csscss3backgroundpngopacity
19
Alex Jj
background: rgba(0,0,0,.5);

不透明度にrgbaを使用できます。ie9+以上のブラウザでのみ動作します

34
bob

[〜＃〜] rgba [〜＃〜] を使用：background-color: rgba(255, 0, 0, .5)

3
bookcasey

一般的に使用されるブラウザのほとんどがサポートしているため、rgbaを使用します。

.social img:hover {
 background-color: rgba(0, 0, 0, .5)
}
2
Mohd. Umar

CSSを使用して不透明度を追加するのはあまりよくありません。
不透明度には、設定した場所からすべてのコンテンツと子に適用される面白い方法があり、色が混在するという予期しない結果が生じます。
その場合、bgカラーの場合、実際には何の目的もありません。
bgイメージの上に置いて配置したい場合は、複数の背景を使用できます。
この透明色は、余分なpngを繰り返して適用することができます（またはbackground-positionを使用しないで）。
CSSグラデーション（放射状）rgba色の線形グラデーション（同じ色で開始および終了）これも達成します。それらは背景画像として扱われ、フィルターとして使用できます。
テキストを区別します。少し透明にしたい場合は、rgbaを使用します（text-shadowを組み合わせてください）。

今日、CSSの不透明度の面白い動作をドロップできると思います。

好奇心が強い場合は、不透明度に使用されるrgbaを混合しますdabblet.com/Gist/5685845

1
G-Cyr

[〜＃〜] rgb [〜＃〜]値とopacity希望する透明度を取得します。

例えば、

<div style=" background: rgb(255, 0, 0) ; opacity: 0.2;">&nbsp;</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.4;">&nbsp;</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.6;">&nbsp;</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 0.8;">&nbsp;</div>
<div style=" background: rgb(255, 0, 0) ; opacity: 1;">&nbsp;</div>

同様に、不透明度のない実際の値では、以下が得られます。

<div style=" background: rgb(243, 191, 189) ; ">&nbsp;</div>
<div style=" background: rgb(246, 143, 142) ; ">&nbsp;</div>
<div style=" background: rgb(249, 95 , 94)  ; ">&nbsp;</div>
<div style=" background: rgb(252, 47, 47)   ; ">&nbsp;</div>
<div style=" background: rgb(255, 0, 0)     ; ">&nbsp;</div>

これを見ることができます WORKING EXAMPLE 。

さて、あなたの問題を具体的にターゲットにした場合、ここに あなたの問題に特有のデモの作業 があります。

HTML

<div class="social">
    <img src="http://www.google.co.in/images/srpr/logo4w.png" border="0" />
</div>

CSS：

social img{
    opacity:0.5;
}
.social img:hover {
    opacity:1;
    background-color:black;
    cursor:pointer;
    background: rgb(255, 0, 0) ; opacity: 0.5;
}

これがお役に立てば幸いです。

1
Nitesh