[Solved] Semi-transparent text background problems

[skip88]

Trying to get a nice background behind my text on a website, but it all falls over when I try to make only the background behind the text semi-transparent.

The effect I want is just like the quote in the middle of this site – http://www.upstruct.com/
But. I also want the background behind the text to be a bit see through.
But! The text still needs to be stay fully opaque.

The background behind the text needs to be flexible too. As the text it is behind will change in lengths regularly.
So that counts out having a coloured & semi-transparent div.

So here’s what I’ve got at the moment…

html

Code:

No really, problems?

css

Code:

.baseline-text-bg {
background-color: white;
padding: 3px;
opacity: 0.6;
filter: alpha(opacity=60);
}

.baseline-text {
font-size: 50%;
text-transform: uppercase;
}

Now before you say it, yes I recognise the problems with it from the start too. The fact that the text is nested inside the transparent bit…. But this is where I’ve ended up.

It started with it all being in one little <span> thingy, which works perfectly, like on that site I showed, until I want to progress to making the background also semi-transparent as well as white..

Also. IE8 doesn’t seem to make it semi-transparent at all….. sigh

[skip88]

What I want is to have a semi-transparent background (eg. 50% or 60%) behind the text.
But then to have the text fully opaque. Fully visible.

So, you mean like this?

Code:

.baseline-text-bg {
background-color: white;
padding: 3px;
opacity: 0.6;
filter: alpha(opacity=60);
}

.baseline-text {
font-size: 50%;
text-transform: uppercase;
opacity: 1;
filter: alpha(opacity=100);
}

[skip88]

Found a solution here – http://csscreator.com/topic/semi-transp … d-problems
for anyone else coming along this kind of thing

What I’m doing is using RGBA colour values on the background, and then for a fall-back for the unwilling might of IE, like you suggested tt_mark, I’m using a semi-transparent PNG.

ended up as:

Code:

.baseline-text {
background: url(../images/background_white60.png);
background: rgba(255,255,255,.6);
padding: 3px;
font-size: 50%;
color: #000000;
}

[Author]

Posts