Question

标题有点满口。我刚开始使用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>

Answer 1

对于第一个问题，您将无法将叠加层居中放置在图像上，因为图像实际上不是200px x 200px，因为图像周围存在透明像素。因此，首先裁剪图像周围的透明像素并获得其真实尺寸。然后将下面的CSS中的200px大小替换为适当的大小。
我已通过添加display: flex和align-content: center（用于垂直对齐）和justify-content: center（用于水平对齐）来更正您的代码段，以使文本居中，< / p>
我还向overflow: hidden添加了.image-container .after以防止文本溢出，并将文本大小更改为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>

如何在悬停时使用深色覆盖背景在图像上覆盖透明文本？

1 个答案: