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

Posted 2023-05-08

【中文标题】如何在带有文本的图像上方创建透明的深色叠加层？

【英文标题】：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 也可以查看这篇文章

【参考方案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"  />
</div>

更多详情请到here https://***.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css

【参考方案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。