标签：html javascript css css3 css-transitions

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

.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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。