Transparent background with opaque text

Question

On my site here, You can see that I'm trying to display the titles over the thumbnails and the orange background is translucent but the title is also inheriting the opacity property from the CSS.

The issue is that I can't make one element opaque and the other translucent.

Is there any way I can assign a different class to the title of the posts?

I'm using the below php code in index.php to display these posts like this:

get_header(); ?>

    <div id="primary">
        <div id="content" role="main">

        <div id="welcome">
        <h1>HELLO</h1>
        <p>Fusion Media offer a range of media services within the sport of cycling.</p><p>Wherever you look, more and more people are finding cycling an inclusive platform to reach the new breed of health-conscious, weekend-adventurers.</p> <p><strong>Whatever you need to achieve resonance with that group,</p><p>Fusion Media has you covered.</strong></p>
        </br>
        <p><h1>LATEST NEWS</h1></p>
        </br>
        </div>
        <?php if ( have_posts() ) : ?>

            <?php twentyeleven_content_nav( 'nav-above' ); ?>

            <?php query_posts('cat=4&showposts='.get_option('posts_per_page')); ?>

            <?php /* Start the Loop */ ?>
            <?php while ( have_posts() ) : the_post(); ?>
            <div class="post-thumb-title">
            <a href="<?php the_permalink() ?>"><?php the_post_thumbnail(array(632,305));?></a>
            <p class="thumb-title"><?php the_title(); ?></p>
            </div>                  

            <?php endwhile; ?>

            <?php twentyeleven_content_nav( 'nav-below' ); ?>

        <?php else : ?>

            <article id="post-0" class="post no-results not-found">
                <header class="entry-header">
                    <h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
                </header><!-- .entry-header -->

                <div class="entry-content">
                    <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
                    <?php get_search_form(); ?>
                </div><!-- .entry-content -->
            </article><!-- #post-0 -->

        <?php endif; ?>
        <div id="welcome">
        <p><h1><a href="/latest-news/">MORE NEWS...</a></h1></p>
        </br>
        </div>
        </div><!-- #content -->
    </div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

And this is the CSS for the div:

div.post-thumb-title p.thumb-title {
margin: 0;
height: 2em;
line-height: 2;
position: relative;
top: -2.5em;
max-width: 100%;
text-align: center;
color: #000;
background: #DF7106;
font-family: 'dinregular';
font-size: 22px;
left: -65px;
opacity:0.7 !important;
filter:alpha(opacity=40);
}

Thanks

Use rgba in CSS for background color, or use a PNG. Opacity affects the element and all that is contained. — David, Sep 24 '12 at 20:21
Just did that. But if you check the site again, you'll see that the title is still gaining the opacity property. — Bhanu Chawla, Sep 24 '12 at 20:30
Sorry, but no. If you change `rgba(255, 255, 255, 0.3)` to `rgba(255, 255, 255, 0)` you can see the text fully, so it is not being affected by the "opacity". — David, Sep 24 '12 at 20:32
After doing that, there's no background at all and the title is still translucent. — Bhanu Chawla, Sep 24 '12 at 20:36
-_- I told you to do that to prove the title isn't translucent, not to keep it like that permanately. On my screen, it is fully solid color. — David, Sep 24 '12 at 20:39
related http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on — Adriano, Mar 02 '14 at 14:11

score 3 · Accepted Answer · answered Sep 24 '12 at 20:43

3

You should use rgba or a png to achieve this effect. opacity is annoying because it affects all child elements and anything within that element too, and can't be over ridden on child elements.

Using rgba would produce results like so (I've removed the image on one of them to show the text is NOT transparent).

RGBA example

answered Sep 24 '12 at 20:43

David

2,053
2
16
26

Thanks for your help David. The text seemed like transparent but it is not. Worked like a charm. Thanks again. :) – Bhanu Chawla Sep 24 '12 at 20:48
1

@BhanuChawla Can I make a suggestion? Add `text-shadow: 0 1px rgba(0, 0, 0, 0.7);` to the paragraph. It makes the white text slightly more readable :-). – David Sep 24 '12 at 20:49
Ah yes! The text shadow really did make the text more readable. Thanks David. :) – Bhanu Chawla Sep 25 '12 at 11:50

score -1 · Answer 2 · answered Sep 24 '12 at 20:26

-1

Why not set:

div.post-thumb-title{
    margin: 0;
    height: 2em;
    line-height: 2;
    position: relative;
    top: -2.5em;
    max-width: 100%;
    text-align: center;
    color: #000;
    background: #DF7106;
    font-family: 'dinregular';
    font-size: 22px;
    left: -65px;
    opacity:0.7 !important;
    filter:alpha(opacity=40);
}
p.thumb-title{
    color:#000;
    opacity: 1;        
}

If the p is getting grouped with the styles for the thumb-title class it is going to get the same opacity.

answered Sep 24 '12 at 20:26

Rchristiani

424
3
18

Ok this is the CSS now: `div.post-thumb-title p.thumb-title { margin: 0; height: 2em; line-height: 2; position: relative; top: -2.5em; max-width: 100%; text-align: center; color: #000; font-family: 'dinregular'; font-size: 22px; left: -65px; } p.thumb-title{ color:#000; background: rgba(255, 255, 255, 0.3); }` But still no luck. Both the elements are still translucent. – Bhanu Chawla Sep 24 '12 at 20:32
take out the p.thumb-title in the first one. – Rchristiani Sep 24 '12 at 20:43
2

@Rchristiani if you actually tested your "solution", it doesn't work. Opacity can not be overridden from child elements, they will still be affected by the parent opacity. Look at this example: http://www.w3schools.com/css/tryit.asp?filename=trycss_transparency – David Sep 24 '12 at 20:44
@David yeah I know, I did test it right after, as I had that thought right after. I was actually referring to the css he just posted here. with the rgba color, div.post-thumb-title p.thumb-title{}, I am saying it should be div.post-thumb-title{} then a rule for the p.thumb-title{} – Rchristiani Sep 24 '12 at 20:47

Transparent background with opaque text

2 Answers2