CSS 具有不透明度的文本区域图像背景，不会影响前景文本

Question

我有一个文本区域，用户可以更改其大小。

我需要一个图像背景，但我不希望图像干扰文本，因此图像应该是部分透明的，而不影响用户可以在其上键入的文本的不透明度。

我点击了这个建议使用::before的链接，但它在我的 Firefox 浏览器上不起作用。

<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>

CSS

.hero {
    position: relative; 
    /* height: 100vh; */
    /* width: 100%; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero::before {    
      content: "";
      background-image: url('https://placekitten.com/1200/800');
      background-size: cover;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.75;
}

https://jsfiddle.net/z86yfLvh/1/

我应该如何解决这个问题？

Answer 1

这里最简单的解决方案是将您的textarea元素包装到一个容器中，在其上放置背景并通过rgba()内的background-color和 alpha 调整您的textarea的背景。

像这样：

 .hero { background-color: rgba(255, 255, 255, .7) }.hero-container { background-image: url('https://placekitten.com/1200/800'); background-size: cover; display: inline-block; }

 <div class="hero-container"> <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>

我还应该提到::before不能与textarea一起使用，因为它必须在不能直接包含任何 HTML 元素的textarea内呈现它。 这是一个硬限制。

---

替代解决方案也解决了 OP 在评论中提到的另一个问题：

 .hero { background-color: rgba(255, 255, 255, .7); width: 100%; height: 100%; resize: none; }.hero-container { background-image: url('https://placekitten.com/1200/800'); background-size: cover; resize: both; overflow: auto; width: 100%; }

 <div class="hero-container"> <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>

我在textarea上使用resize: none来禁用调整它的大小的能力，我将它添加到容器中，而width: 100%; height: 100% width: 100%; height: 100%确保textarea也随容器一起伸展。