Menu
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; } 
533
Changing the opacity of the background color only To achieve this, use a color value which has an alpha channel—such as rgba. As with opacity , a value of 1 for the alpha channel value makes the color fully opaque. Therefore background-color: rgba(0,0,0,. 5); will set the background color to 50% opacity.
The percentage of opacity is calculated as Opacity% = Opacity * 100 To set the opacity only to the background and not the text inside it. It can be set by using the RGBA color values instead of the opacity property because using the opacity property can make the text inside it fully transparent element.
Approach: We can use the opacity property in CSS which is used to change the opacity of an element. The value of the property can be set in a range of 0 to 1, where “0” is fully transparent and “1” is opaque. Any decimal value can be used in between to set the opacity accordingly.
You have to add the following CSS property to achieve the transparency levels. This sets the background-color of an element to black with 50% opacity. The last value in an rgba value is the alpha value. An alpha value of 1 is equal to 100% opacity, and 0.5 (or .
background: rgba(0,0,0,.5); you can use rgba for opacity, will only work in ie9+ and better browsers
63
Use RGBA like this: background-color: rgba(255, 0, 0, .5)
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
