Grow your CSS skills. Land your dream job.

[Solved] Semi-transparent text background problems

  • # February 7, 2010 at 5:21 pm

    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

    # February 7, 2010 at 6:45 pm

    Hmm…I’m a little confused because the example site you showed does not have see-through text.

    From what you have said, it seems that you want a transparent background, but non-transparent text? But that is nothing like the site you have given in the example. That site has both opaque text and opaque background.

    To make the text in your example non-transparent, you simply need to set opacity to 1 and filter to 100 in the baseline-text class

    # February 8, 2010 at 8:01 am

    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);
    }

    # February 8, 2010 at 10:33 am

    Actually, having just Googled what you want to do, it appears that it is not possible. The best way to do it would be to have a transparent PNG as the background image and just set it to repeat so it fills the whole space regardless of the text length

    # February 9, 2010 at 7:18 pm

    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;
    }
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".