Question

我的默认帖子背景默认情况下需要较暗（黑色为0.3），悬停时为0.2。继承人预览：http://polishcreep.stronazen.pl/ 我的帖子循环：

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div id="post" style="height:460px; background-color: rgba(0, 0, 0, 0.3); background-size:cover; width:100%; margin:0; background-image: url('<?php echo $thumb['0'];?>')">
<div id="date_holder">
 <i class="fa fa-calendar fa-inverse"></i>
<?php the_time('j F Y') ?> 
</div>
 <a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
 <h2><?php the_title(); ?></h2></a>
  <div class="entry">
  </div>
 </div>
 <?php endwhile; else: ?>
 <p>Sorry, no posts matched your criteria.</p>
 <?php endif; ?>

如果你能帮我定位日期和头衔，那也很棒。我需要它看起来像这样：http://i.imgur.com/VBgXVUt.jpg

我还需要摆脱这些白色边框，已经将背景设置为100％宽度。

我的CSS：

#post {
height: 460px;
width:100%;
background-size: cover;
background-color: rgba(0, 0, 0, 0.3);
margin:0;

}
#post:hover {
background-color: rgba(0, 0, 0, 0.2);
}
#date_holder{
color: #fff;
text-decoration: none;
margin-left:400px;
font-family: 'Ubuntu', sans-serif;
font-size:16px;
padding:5px;
}
h2 {
color: #fff;
text-decoration: none;
text-align: center;
font-family: 'Ubuntu', sans-serif;
font-weight:bold;
font-size:32px;
padding:5px;
}

Answer 1

我认为最好的方法是使用伪元素添加叠加层。尝试这样做：

#post{
  position: relative;
}
#post:before{
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
}
#post:before:hover{
  background-color: rgba(0, 0, 0, 0.2);
}

到positin date和title尝试将yout内容放在容器中并使用它。

.container{
  width: 500px;
  margin: 0 auto;
}

摆脱边界，使用

body{
  margin: 0;
}

Pozdrawiam！：）

Wordpress发布背景不透明度在悬停时更改

1 个答案: