Achieving white opacity effect in html/css

html css opacity
Jack picture Jack · Oct 19, 2010 · Viewed 110.5k times · Source

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!

alt text

Answer

Bobby Jack picture Bobby Jack · Oct 19, 2010

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.

Related questions

CSS Background Opacity

I am using something similar to the following code: <div style="opacity:0.4; background-image:url(...);"> <div style="opacity:1.0;"> Text </div> </div> I expected this to make the background have an opacity of 0.4 and …

Read More
How do I give text or an image a transparent background using CSS?

Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque? I'd like to accomplish this without having the text and the background as two separate …

Read More
How to make blinking/flashing text with CSS 3

Currently, I have this code: @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } .waitingForConnection { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1); -webkit-animation-duration: 1.7s; } It blinks, but it only blinks in "one direction". I mean, it only fades out, and then it appears back …

Read More