Menu
Is there a way to make a div HTML element half transparent?
750
If you just want your element to be transparent, it's really as easy as : background-color: transparent; But if you want it to be in colors, you can use: background-color: rgba(255, 0, 0, 0.4);
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.
Change the opacity of the box and content Using a value of 0 would make the box completely transparent, and values between the two will change the opacity, with higher values giving less transparency.
So, if you want the background of a <div> to be semi-transparent, and the text to be opaque, you'll simply need an RGBA value for the background, which adds an alpha-transparency to the color.
With CSS, this is cross browser solution
div {
opacity: 0.5;
filter: alpha(opacity = 0.5);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
}
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
