Question

在我的网站here上，您可以看到我正在尝试在缩略图上显示标题，橙色背景是半透明的，但标题也是从CSS继承opacity属性。

问题在于我不能使一个元素不透明而另一个元素半透明。

有什么办法可以为帖子的标题分配不同的课程吗？

我在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会产生这样的结果（我删除了其中一个图像以显示文字 NOT 透明）。

RGBA example

Answer 2

为什么不设置：

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与拇指标题类的样式分组，则会获得相同的不透明度。

透明背景与不透明的文本

2 个答案: