css - 如何创建带有背景图像的css文本框，文本不应溢出，并且必须包裹在图像内

Question

我想创建这种溢出 y 的文本框，它必须在所有视口的屏幕图像内换行。

标签： css

Answer 1

创建一个div包含background-image并插入文本框的。比您可以定位文本框，使其适合marginand padding。目前尚不清楚您是否指的是可编辑的文本框。下面是一个带有可编辑的示例textarea。这个元素有很多需要禁用的默认样式。

.wrapper
{
  width: 250px;
  aspect-ratio: 1;
  padding: 3rem 2rem;
  background: url('https://i.stack.imgur.com/inIfh.png') no-repeat;
  background-size: cover;
}

.wrapper textarea
{
  width: 100%;
  height: 100%;
  appearance: none;
  background: transparent;
  border: none;
  resize: none;
}

<div class="wrapper"> 
  <textarea>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ultrices sagittis orci a scelerisque. Massa id neque aliquam vestibulum. Mauris ultrices eros in cursus turpis
    massa tincidunt. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi nullam. Ipsum suspendisse ultrices
    gravida dictum. Id diam vel quam elementum pulvinar. Mollis nunc sed id semper risus in hendrerit gravida. Viverra
    mauris in aliquam sem fringilla. Quis varius quam quisque id diam vel quam elementum. Lacus laoreet non curabitur
    gravida arcu ac tortor dignissim. Nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Luctus accumsan tortor
    posuere ac ut consequat semper viverra nam. Turpis egestas sed tempus urna. Quisque egestas diam in arcu cursus euismod.
    Magna eget est lorem ipsum.
  </textarea>
</div>

Interactive Code

---

^{更新 2021/7/26 15:00}
看起来滚动条是自定义的。

WebKit 浏览器

textarea::-webkit-scrollbar
{
  width: .6rem;
  background: transparent;
}
textarea::-webkit-scrollbar-thumb
{
  border-radius: 1rem;
  background-color: hsl(0, 0%, 40%);
}

火狐

textarea
{
  scrollbar-width: thin;
  scrollbar-color: hsl(0, 0%, 40%) transparent; 
}