[分享]css中将字显示在图片上

在CSS中实现将文字显示在图片上非常简单。只需要利用CSS的position属性和z-index属性，就可以轻松实现。

img {
  position: relative;
}

img::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 1;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}

p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  z-index: 2;
  color: white;
  font-size: 20px;
  text-align: center;
} 

以上代码中，我们给图片设置了相对定位，然后利用伪元素在图片上加了一个黑色半透明遮罩。接着，我们将需要显示在图片上的文字添加一个绝对定位，并使用transform属性使其居中对齐。最后，使用z-index属性，将文字放在遮罩层的上面。