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

【问题标题】：How to create a transparent dark overlay above image with text?如何在带有文本的图像上方创建透明的深色叠加层？
【发布时间】：2018-01-30 06:13:22
【问题描述】：

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

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

我想要的设计是这样的：

【问题讨论】：

How to make in CSS an overlay over an image?的可能重复
我认为这会对你有所帮助codepen.io/littlesnippets/pen/LpgRxo
freefrontend.com/css-image-effects 也可以查看这篇文章

标签： javascript html css css-transitions

【解决方案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>

【讨论】：

您应该更具描述性。哪个 HTML 元素应该获得 .transparent-dark 类？他需要添加新的标记吗？你能给我们一个工作的例子吗，因为问题的作者甚至为你提供了一个 StackSnippet？

【解决方案2】：

见下文。使用:after 伪代码将背景设置为不透明度为 0。悬停时，不透明度变为 0.3，持续时间为 1 秒。

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

.study1:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 1s ease;
}

.study1:hover:after {
  background: rgba(0, 0, 0, 0.3);
}

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

【讨论】：

【解决方案3】：

使用 js fiddle 中提到的 .wrapper 类设置透明暗图像覆盖，设置位置：相对于.study1 并相应地定位其他元素。

Here 是 js 小提琴。

【讨论】：

【解决方案4】：

这可能会达到您的目的

.image {
    position:relative;
    width:200px;
    height:200px;
}
.image img {
    width:100%;
    vertical-align:top;
}
.image:after {
    content: attr(data-content);
    color:#fff;
    position:absolute;
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:hover:after {
    opacity:1;
}

<div data-content="Here is some text added on hover via a content value of attr(data-content)" class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

【讨论】：

【解决方案5】：

使用此代码

.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;
  -webkit-transform:scale(0);
  transform:scale(0);
  -webkit-transition:0.5s;
  transition:0.5s
}
.study1:hover:after{
   -webkit-transform:scale(1);
  transform:scale(1);
}

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

【讨论】：

【解决方案6】：

.study1 {
  background-image: url("http://www.livingfengshui.ca/wp-content/uploads/2013/07/file7881255537584.jpg");
  height: 300px;
  width: 400px;
  position: relative;
}
.action {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.4);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}
.study1:hover .action {
	height: 100%;
}
.title {
   white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div class="study1">

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

我认为它可能符合您的要求。一个简洁的过渡。

【讨论】：

【解决方案7】：

.container {
  display: flex;
  position: relative;
  border: 1px solid: #ddd;
  width: 300px;
  height: 300px;
}
.overlay {
  position: absolute;
  left: 0;
  padding: 20px;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(127, 127, 127, 0.6);
  transition: all 0.3s ease;
}
.content {
  width: 300px;
  height: 300px;
  background-image: url('http://mays.tamu.edu/citycentre/wp-content/uploads/sites/44/2015/07/pmbaclass.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.text {
  font-size: 25px;
  text-transform: uppercase;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  text-align: center;
  transition: all 0.8s ease;
}
.overlay:hover .text {
  transform: scale(1.2, 1.2);
}

<div class="container">
  <div class="overlay">
    <span class="text">The World's finest developers</span>
  </div>
  <div class="content">
  </div>  
</div>

根据您的要求，这是一个 sn-p。

【讨论】：