如何解决Firefox中textarea用::before设置透明背景图无效的问题

问题原因 #

Firefox浏览器不支持为<textarea>元素生成::before或::after伪元素，这是其对表单类替换元素的渲染规则限制导致的，因此你原本的伪元素方案在Firefox中无法生效。

解决方案 #

通过给<textarea>添加一个父容器，将半透明背景图挂载到父容器的伪元素上，同时让<textarea>本身使用透明背景，即可实现需求，且完全保留textarea的可调整大小特性。

修改后代码 #

HTML部分

<div class="textarea-wrap">
  <textarea class="hero">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </textarea>
</div>

CSS部分

.textarea-wrap {
  position: relative;
  display: inline-block; /* 让容器随textarea的尺寸自适应变化 */
}

.textarea-wrap::before {
  content: "";
  background-image: url('https://placekitten.com/1200/800');
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.75;
  z-index: -1; /* 将背景图置于textarea下方，避免遮挡输入文本 */
}

.hero {
  background-color: transparent; /* 设为透明背景，显示下方的伪元素背景图 */
  resize: both; /* 保留用户调整大小的功能 */
  padding: 0.5rem;
  font-size: 1rem;
  border: 1px solid #ccc; /* 可选：添加边框提升可读性 */
}

说明 #

• 父容器使用inline-block可以自动适配textarea的尺寸，包括用户调整后的大小。
• z-index: -1确保伪元素背景始终在textarea下方，不会干扰文本输入和选中。
• textarea的background-color: transparent是核心设置，让背景图能够透过显示，同时输入文本保持原有清晰度。

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