如何在悬停时在具有深色覆盖背景的图像上覆盖透明文本？答案

【问题标题】：How to overlay transparent text on an image with a dark overlay background on hover?如何在悬停时在具有深色覆盖背景的图像上覆盖透明文本？
【发布时间】：2020-06-21 00:23:41
【问题描述】：

标题有点拗口。我刚刚开始使用 CSS，正在尝试实现文本覆盖的效果，同时图像在文本后面仍然是透明的。

以下是我通过将我找到的各种代码片段拼凑在一起而设法实现的目标。我正在努力使深色叠加层与图像大小相同。我没有在叠加层或图像上使用任何边距或填充，所以不知道为什么会发生这种情况。我还尝试了几种对齐文本的方法，使其垂直位于中间，但没有这样的运气。

.image-container {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.border {

  border-radius: 50%;
}

.image-container .after {
  position: absolute;

  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: none;
  color: #FFF;
  border-radius: 50%;
}

.image-container:hover .after {
  display: block;
  background: rgba(0, 0, 0, .6);
  border-radius: 50%;
}

#title {
  background: url('https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png');
  background-size: cover;
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  padding: 0;
  display: flex;


}

h1 {
  font-size: 80px;
  font-family: sans-serif;
  text-align: center;
  text-shadow: 0 0 1px rgba(0, 0, 0, .1);
  margin: 0;
  padding: 0;
 
  letter-spacing: -1px;
  line-height: 0.8;

}

<div class="image-container">
  <img src="https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png" class='border' />
  <div class="after">

    <div id="title">


      <h1><b>ONE<br>TWO</b></h1>
    </div>

  </div>
</div>

【问题讨论】：

您的 h1 字体大小应该与您的图像大小成正比。您将需要修补以找到确切的比率

标签： html css image overlay transparent

【解决方案1】：

对于第一个问题，您将无法将叠加层置于图像的中心，因为图像实际上不是 200 像素 x 200 像素，因为图像周围有透明像素。所以首先裁剪图像周围的透明像素并获得它的真实尺寸。然后将下面css中的200px大小替换为合适的大小。
我已经更正了您的代码 sn-p，以便能够通过添加 display: flex 和 align-content: center（用于垂直对齐）和 justify-content: center（用于水平对齐）使文本居中，
我还在.image-container .after 中添加了overflow: hidden 以防止文本溢出，并将文本大小更改为60px 以获得更好的可见性。

.image-container {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

.image-container .after {
  position: absolute;
  display: none;
  left: 0;
  bottom: 0;
  overflow: hidden;
  color: #FFF;
}

.image-container:hover .after {
  display: flex;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  border-width: 0px;
  width: 200px;
  height: 200px;
}

#title {
  background: url('https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png');
  background-size: cover;
  color: #fff;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  padding: 0;
  display: flex;
  align-content: center;
  justify-content: center;
  width: 100%;
}

h1 {
  font-size: 60px;
  font-family: sans-serif;
  text-align: center;
  text-shadow: 0 0 1px rgba(0, 0, 0, .1);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  letter-spacing: -1px;
  line-height: 0.8;
}

<div class="image-container">
  <img src="https://bopepor.es/wp-content/uploads/2018/08/Logo-200x200PX.png" class='border' />
  <div class="after">

    <div id="title">


      <h1><b>ONE<br>TWO</b></h1>
    </div>

  </div>
</div>

【讨论】：