html - 带有不透明文本的透明背景

Question

在我的网站上 here , 你可以看到我试图在缩略图上显示标题，橙色背景是半透明的，但标题也继承了 CSS 的不透明度属性。

问题是我无法使一个元素不透明而另一个元素半透明。

有什么方法可以为帖子的标题分配不同的类别？

我在 index.php 中使用以下 php 代码来显示这些帖子，如下所示:

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(); ?>

这是 div 的 CSS:

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

谢谢

Answer 1

您应该使用 rgba 或 png 来实现此效果。 opacity 很烦人，因为它会影响所有子元素以及该元素内的任何内容，并且不能过度覆盖子元素。

使用 rgba 会产生这样的结果(我删除了其中一个上的图像以显示文本不透明)。