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

CSS中的字体显示是网页设计的关键要素，而有时我们需要在图片上面放置字体，使之和图片共同构成美观的设计。这就需要用到CSS中的一些特殊技巧。.imagewithtext { : relative; d...

CSS中的字体显示是网页设计的关键要素，而有时我们需要在图片上面放置字体，使之和图片共同构成美观的设计。这就需要用到CSS中的一些特殊技巧。

.image-with-text {
  position: relative;
  display: inline-block;
}

.image-with-text img {
  display: block;
}

.image-with-text .text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  color: #fff;
  text-shadow: 1px 1px #000;
} 

上面的代码实现了在图片上覆盖显示文字的效果，通过将图片设置为绝对定位，再在图片上面放置一个绝对定位的文字元素，可以控制文字的大小、颜色、阴影等属性。

使用这种方法可以实现很多有趣的设计效果，如字幕式的文字滚动、悬停在图片周围的标注文字等等。