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

Solution 1

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

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

Solution 2

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

Solution 3

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

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

Solution 4

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.

View more solutions

Comments

[Jelgab]

Note that using something like: <div style=" background: rgb(255, 0, 0) ; opacity: 0.2;">&nbsp;</div> Will not only change the background but also the contents. Change the above line to this and you will see the situation: <div style=" background: rgb(255, 0, 0) ; opacity: 0.2;">Some text here</div>

[Andres SK]

Is it possible to just change the opacity with an already set rgb background color?