1

ここの私のサイトでは、サムネイルの上にタイトルを表示しようとしていて、オレンジ色の背景は半透明ですが、タイトルも CSS から opacity プロパティを継承していることがわかります。

問題は、1 つの要素を不透明にし、もう 1 つの要素を半透明にすることができないことです。

投稿のタイトルに別のクラスを割り当てる方法はありますか?

これらの投稿を次のように表示するために、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);
}

ありがとう

4

2 に答える 2

3

rgbaこの効果を得るには、 または png を使用する必要があります。opacityすべての子要素とその要素内のすべてに影響し、子要素をオーバーライドできないため、面倒です。

rgba を使用すると、そのような結果が生成されます (テキストが透明でないことを示すために、そのうちの 1 つの画像を削除しました)。

RGBA の例

于 2012-09-24T20:43:07.353 に答える
-1

設定しない理由:

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クラスのスタイルでグループ化されている場合、同じ不透明度になります。

于 2012-09-24T20:26:21.603 に答える