javascript - 具有交替行和行号的文本区域

Question

我正在尝试绘制一个带有交替行和行号的textarea。具有行号的一个非常简单的解决方案如下 - 请参阅 here了解更多详情。

textarea {
  background: url(http://i.imgur.com/2cOaJ.png);
  background-attachment: local;
  background-repeat: no-repeat;
  padding-left: 35px;
  padding-top: 10px;
  border-color: #ccc;
}

<textarea rows="10" cols="40"></textarea>

虽然拥有一个带有交替行的textarea只是简单的

textarea {
  background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
  background-size: 100% 4rem;
  border: 1px solid #CCC;
  width: 100%;
  height: 400px;
  line-height: 2rem;
  margin: 0 auto;
  padding: 4px 8px;
}

<textarea rows="10" cols="40"></textarea>

两种解决方案都可以正常工作，但将它们结合起来就很棘手，因为两者都使用背景来破解行号和备用行背景。

Answer 1

您可以通过将 textarea 包装在 div 中来组合它们，然后将剥离的背景样式分配给该包装 div，因此 2 个背景就像分层的。

textarea {
  background: url(http://i.imgur.com/2cOaJ.png);
  background-attachment: local;
  background-repeat: no-repeat;
  padding-left: 35px;
  padding-top: 10px;
  border-color: #ccc;

  font-size: 13px;
  line-height: 16px;
}

.textarea-wrapper {
  display: inline-block;
  background-image: linear-gradient(#F1F1F1 50%, #F9F9F9 50%);
  background-size: 100% 32px;
  background-position: left 10px;
}

<div class="textarea-wrapper">
  <textarea rows="10" cols="40"></textarea>
</div>

我将包裹 div 设置为 display: inline-block，因此它像内联元素一样包裹 textarea，并且我将背景渐变定位在距顶部 10px 的位置以考虑到你的padding-top。

您可能需要调整渐变的背景大小，以使其正确匹配textarea的行高。

更新对于@DavidThomas 的观点，为了帮助您的文本与交替渐变对齐，背景大小高度值应该是文本区域行高的 2 倍(请参阅更新的代码片段)。但更困难的是让它与图像编号对齐。