css - 添加带有文本的非常基本的颜色叠加层

Question

我正在寻找一些关于如何为我的 WordPress 帖子图像添加翻转效果的建议。现在图像被拉入并设置为背景图像，所以这对我来说很棘手。这是我的代码:

<div class="portfolio-image" style="background: url(<?php echo $src[0]; ?> ); background-size: cover;">


    <h2 style="margin:0; padding: 0;"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

            <?php echo get_the_tag_list('<p> | ','&nbsp;&nbsp; | ','</p>'); ?>

    </div>

.portfolio-image{width: 324px; height: 280px; background-repeat:no-repeat; box-sizing: border-box; border:2px solid #fff; padding: 20px; float: left;}

现在我尝试包裹 div 并对该 div 应用悬停效果，但它反转了我想要的效果，因此它悬停并显示我的帖子图像。我需要它做的是正常显示图像，但是当您将鼠标悬停在图像上时，图像变暗并且标题出现在顶部。真的很难弄明白，因为它是背景图片。

Answer 1

通过使用伪元素作为覆盖颜色，您可以在没有额外标记的情况下做到这一点。

.portfolio-image {
  background-image: url(http://lorempixel.com/output/people-q-c-324-280-6.jpg);
  width: 324px;
  height: 280px;
  bg background-repeat: no-repeat;
  box-sizing: border-box;
  border: 2px solid #fff;
  padding: 20px;
  float: left;
  color: white;
  position: relative;
}
.portfolio-image > * {
  opacity: 0;
  transition: opacity: 0.25s ease;
  position: relative;
}
.portfolio-image:hover > * {
  opacity: 1;
}
.portfolio-image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.25s ease;
}
.portfolio-image:hover:before {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

<div class="portfolio-image">
  <h2>some text</h2>
  <p>Lorem ipsum dolor sit amet.</p>
</div>