带不透明文字的透明背景

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

问题是我不能让一个元素不透明，另一个透明。

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

我用下面的代码放在index.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(); ?>

这是股利的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); 
}

感谢

来源

2012-09-24 Bhanu Chawla

在CSS使用RGBA背景颜色，或使用PNG。不透明度影响元素和所包含的全部内容。 – David

刚刚做到了。但是，如果您再次查看网站，您会看到标题仍在获取不透明属性。 –

对不起，但没有。如果您将'rgba（255,255,255,0.3）'改为'rgba（255,255,255,0）'，您可以完全看到文本，因此它不受“不透明度”的影响。 – David

您应该使用rgba或png来实现此效果。 opacity很烦人，因为它会影响该元素中的所有子元素和任何内容，并且不能超过子元素。（使用rgba会产生像这样的结果（我已经删除了其中一个图像，以显示文本是不是透明）。

RGBA example

来源

2012-09-24 20:43:07 David

感谢您的帮助David。文本看起来像透明，但事实并非如此。像魅力一样工作。再次感谢。 :) –

@BhanuChawla我可以提出建议吗？将'text-shadow：0 1px rgba（0，0，0，0.7）;'添加到段落中。它使得白色文本更具可读性:-)。 – David

啊是的！文字阴影确实使文本更具可读性。谢谢大卫。 :) –

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

来源

2012-09-24 20:26:21 Rchristiani

我试过，但然后不透明度财产不起作用。 –

好吧，这是现在的CSS： 'div.post-thumb-title p.thumb-title { margin：0; 身高：2em; line-height：2; 位置：相对; top：-2.5em; max-width：100％; text-align：center; 颜色：＃000; font-family：'dinregular'; font-size：22px; left：-65px; } p.thumb-title { color：＃000; background：rgba（255,255,255,0.3）; }' 但仍然没有运气。这两个元素仍然是半透明的。 –

取出第一个p.thumb标题。 – Rchristiani

带不透明文字的透明背景

回答

相关问题