javascript – 如何使用文本在图像上方创建透明的黑色叠加层？

我希望在文本上方创建一个透明的暗图像覆盖图像.在悬停时有一个很好的过渡.

.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>

我想要的设计是这样的：

解决方法:

.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>

标签：html,javascript,css,css3,css-transitions
来源： https://codeday.me/bug/20190727/1551314.html