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

User · Answer

Use rgba as most of the commonly used browsers supports it     social img hover    background-color  rgba 0  0  0   5

User · Answer

background  rgba 0 0 0  5     you can use rgba for opacity  will only work in ie9  and better browsers

User · Answer

Use RGBA like this  background-color  rgba 255  0  0   5

User · Answer

Use RGB values combined with opacity to get the transparency that you wish   For instance    lt div style   background  rgb 255  0  0    opacity  0 2   gt  amp nbsp  lt  div gt   lt div style   background  rgb 255  0  0    opacity  0 4   gt  amp nbsp  lt  div gt   lt div style   background  rgb 255  0  0    opacity  0 6   gt  amp nbsp  lt  div gt   lt div style   background  rgb 255  0  0    opacity  0 8   gt  amp nbsp  lt  div gt   lt div style   background  rgb 255  0  0    opacity  1   gt  amp nbsp  lt  div gt    Similarly  with actual values without opacity  will give the below    lt div style   background  rgb 243  191  189      gt  amp nbsp  lt  div gt   lt div style   background  rgb 246  143  142      gt  amp nbsp  lt  div gt   lt div style   background  rgb 249  95   94       gt  amp nbsp  lt  div gt   lt div style   background  rgb 252  47  47        gt  amp nbsp  lt  div gt   lt div style   background  rgb 255  0  0          gt  amp nbsp  lt  div gt    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   lt div class  social  gt       lt img src  http   www google co in images srpr logo4w png  border  0    gt   lt  div gt    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

User · Answer

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

[css] How to change the background colour's opacity in CSS

Examples related to css

Examples related to background

Examples related to png

Examples related to opacity