如何用Tailwind CSS实现镂空文字显示背景图片效果

你需要利用Tailwind的bg-clip-text和text-transparent属性实现该效果，核心思路是让文字区域透明透出底层图片，其余区域被黑色半透明遮罩覆盖。以下是两种可行的修改方案：

方案一：基于img标签的实现 #

<div class="relative w-full md:w-3/5 h-[300px]">
  <!-- 底层背景图片 -->
  <img src="images/hometopImg.png" alt="Image" class="w-full h-full object-cover" />
  <!-- 黑色遮罩 + 镂空文字 -->
  <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
    <h1 class="text-4xl font-bold text-transparent bg-clip-text bg-[url('images/hometopImg.png')] bg-cover bg-center">FILL</h1>
  </div>
</div>

关键属性说明： #

• text-transparent：将文字颜色设为透明，让底层内容可透出
• bg-clip-text：把背景图像裁剪到文字轮廓范围内，仅文字区域显示背景图
• bg-[url('images/hometopImg.png')]：给文字设置与底层一致的图片背景，配合bg-cover bg-center保证和底层图片位置对齐，避免错位

方案二：更简洁的容器背景继承方案 #

如果想避免重复引用图片URL，可以将图片设为外层容器的背景，文字背景直接继承：

<div class="relative w-full md:w-3/5 h-[300px] bg-[url('images/hometopImg.png')] bg-cover bg-center">
  <!-- 黑色遮罩 + 镂空文字 -->
  <div class="absolute inset-0 bg-black/50 flex items-center justify-center">
    <h1 class="text-4xl font-bold text-transparent bg-clip-text bg-inherit">FILL</h1>
  </div>
</div>

这种方式通过bg-inherit直接继承外层容器的背景设置，无需重复编写图片路径，代码更简洁。

内容的提问来源于stack exchange，提问作者soccerway