Html 带有不透明文本的透明背景

在我的网站上，你可以看到我试图在缩略图上显示标题，橙色背景是半透明的，但标题也继承了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.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;        
}

---

如果

p

与thumb title类的样式分组，则将获得相同的不透明度

您应该使用

rgba

或png来实现此效果<代码>不透明度很烦人，因为它会影响所有子元素以及该元素中的任何内容，并且不能过度依赖子元素

使用rgba会产生这样的结果（我删除了其中一个上的图像，以显示文本是非透明的）

---

使用CSS中的rgba作为背景色，或使用PNG。不透明度会影响元素和包含的所有内容。就是这样做的。但是如果您再次检查站点，您将看到标题仍然获得不透明度属性。抱歉，但不是。如果您将

rgba（255，255，255，0.3）

更改为

rgba（255，255，255，0）

您可以完全看到文本，因此它不会受到“不透明度”的影响。执行此操作后，没有任何背景，标题仍然是半透明的。--我告诉过你这样做是为了证明标题不是半透明的，而不是永久保持这样。在我的屏幕上，它是完全纯色的。现在这是CSS：

div.post-thumb-title p.thumb-title{margin:0；高度：2em；线条高度：2；位置：相对；顶部：-2.5em；最大宽度：100%；文本对齐：中心；颜色：#000；字体系列：'dinregular'；字体大小：22px；左侧：-65px；}p.thumb-title{color:#000；背景：rgba（255，255，255，0.3）}

但仍然没有运气。这两个元素仍然是半透明的。去掉第一个元素中的p.thumb-title。@Rchristiani如果您实际测试了“解决方案”，则它不起作用。不能从子元素覆盖不透明度，它们仍将受到父不透明度的影响。看看这个例子：@David，是的，我知道，我在那之后就做了测试，就像我在那之后的想法一样。我实际上是指他刚刚发布的css。对于rgba颜色，div.post-thumb-title p.thumb-title{}，我是说它应该是div.post-thumb-title{}，然后是p.thumb-title{}的规则谢谢你的帮助David。文本看起来是透明的，但事实并非如此。工作得很有魅力。再次感谢。：）@BhanuChawla我能提个建议吗？添加

文本阴影：0 1pxRGBA（0,0,0,0.7）到段落。它使白色文本更具可读性：-）。啊，是的！文本阴影确实使文本更具可读性。谢谢大卫。：）
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;        
}