How to change the background colour's opacity in CSS

Question

I have a PNG file which I give a background colour to its transparent areas, but I would like to make the background colour a bit transparent, like opacity. Here is my code so far:

social img{
    opacity:0.5;
}
.social img:hover {
    opacity:1;
    background-color:black;
}

score 48 · Accepted Answer · answered Jun 02 '13 at 15:46

48

background: rgba(0,0,0,.5);

you can use rgba for opacity, will only work in ie9+ and better browsers

answered Jun 02 '13 at 15:46

bob

859
1
8
16

66

Is it possible to just change the opacity with an already set rgb background color? – Andres SK Dec 26 '15 at 16:42

score 6 · Answer 2 · answered Jun 02 '13 at 15:46

6

Use RGBA like this: background-color: rgba(255, 0, 0, .5)

answered Jun 02 '13 at 15:46

bookcasey

39,223
13
77
94

Nitesh · Answer 3 · 2013-06-02T15:59:20.587

Use RGB values combined with opacity to get the transparency that you wish.

For instance,

<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>

Similarly, with actual values without opacity, will give the below.

<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>

You can have a look at this WORKING EXAMPLE.

Now, if we specifically target your issue, here is the WORKING DEMO SPECIFIC TO YOUR ISSUE.

The HTML

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

The CSS:

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

Hope this helps Now.

Note that using something like:

Will not only change the background but also the contents. Change the above line to this and you will see the situation:
Some text here — Jelgab, Jun 23 '15 at 20:20

score 2 · Answer 4 · answered Jun 02 '13 at 17:43

2

Use rgba as most of the commonly used browsers supports it..

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

answered Jun 02 '13 at 17:43

Umar Sid

1,317
1
17
24

G-Cyrillus · Answer 5 · 2013-06-02T17:05:53.027

Not too sure to add opacity via CSS is such a good idea.
Opacity has that funny way to be applied to all content and childs from where you set it, with unexpected results in mixed of colours.
It has no really purpose in that case , for a bg color, in my opinion.
If you'd like to lay it hover the bg image, then you may use multiple backgrounds.
this color transparent could be applyed via an extra png repeated (or not with background-position),
CSS gradient (radial-) linear-gradient with rgba colors (starting and ending with same color) can achieve this as well. They are treated as background-image and can be used as filter.
Idem for text, if you want them a bit transparent, use rgba (okay to put text-shadow together).

I think that today, we can drop funny behavior of CSS opacity.

Here is a mixed of rgba used for opacity if you are curious dabblet.com/gist/5685845

How to change the background colour's opacity in CSS

5 Answers5

Linked