Menu
is there a way to achieve this effect in a cross-browser compatible way without having to prepare separated images?
Basically the frame on which text lays has a white overlay of 50% opacity.. I would like a solution that doesn't involve creating any other image in addition to the background but I don't know if it's possible!
484
Transparency using RGBA In addition to RGB, you can use an RGB color value with an alpha channel (RGBA) - which specifies the opacity for a color. An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).
The formula for this is 255 - ( 255 - x ) / opacity .
There is no background-opacity property in CSS, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.
The opacity property sets the opacity level for an element. The opacity-level describes the transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent.
Try RGBA, e.g.
div { background-color: rgba(255, 255, 255, 0.5); } As always, this won't work in every single browser ever written.
173
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
