图片文字叠加

使用叠加效果在图片上显示文字。

• 使用 backdrop-filter 应用 blur(14px) 和 brightness(80%) 效果。这使得文字在任何背景图片和颜色下都能清晰可读。

<div>
  <h3 class="text-overlay">你好，世界</h3>
  <img src="https://picsum.photos/id/1050/1200/800">
</div>

div {
  position: relative;
}

.text-overlay {
  position: absolute;
  top: 0;
  left: 0;
  padding: 1rem;
  font-size: 2rem;
  font-weight: 300;
  color: white;
  backdrop-filter: blur(14px) brightness(80%);
}