javascript - 如何在带有文本的图像上方创建透明的深色叠加层？

Question

我想要创建一个透明的深色图像覆盖在带有文本的图像上方。悬停时有一个很好的过渡。

.study1 {
  background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
  height: 300px;
  width: 400px;
}

.title {
  margin: 0 auto;
  width: 60%;
  display: block;
  font-size: 1.25em;
  color: #ccc;
  text-align: center;
padding-top: 120px;
}

<div class="study1">

  <div class="">
    <a class="title" href="#">View Case Study</a>
  </div>
</div>

我想要的设计是这样的:

Answer 1

.study1 {
  background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
  height: 300px;
  width: 400px;
  position:relative;
  z-index:1;
}
.study1:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:-1;
}

.title {
  margin: 0 auto;
  width: 60%;
  display: block;
  font-size: 1.25em;
  color: #ccc;
  text-align: center;
padding-top: 120px;
}
.transparent-dark {
      background: rgba(0, 0, 0, 0.5);
      
      height:100%;
      
    }

<div class="study1">

  <div class="transparent-dark">
    <a class="title" href="#">View Case Study</a>
  </div>
</div>