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>

两种解决方案都可以，但是将它们结合起来很棘手，因为两者都利用background来破解行号和备用行背景。

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>

我设置为display: inline-block的包装div，因此它像内联元素一样包装textarea，并且我将背景渐变从顶部放置了10px，以适应顶部填充。

您可能必须使用渐变的背景大小才能使其与textarea的行高正确匹配。

更新为了@DavidThomas的观点，为了帮助您使文本与交替的渐变对齐，背景大小的高度值应该是textarea的行高的2倍（请参阅更新的代码段）。但是更难的是使其与图像编号对齐。

Answer 2

您可以为同一元素使用多个背景。

CSS允许您通过background-image属性为一个元素添加多个背景图像。

在您情况下：

textarea {
  width: 100%;
  min-height: 100px;
  background: url(http://i.imgur.com/2cOaJ.png) top -12px left / auto no-repeat, 
              linear-gradient(#F1F1F1 50%, #F9F9F9 50%) top left / 100% 32px;
  border: 1px solid #CCC;
  box-sizing: border-box;
  padding: 0 0 0 30px;
  resize: vertical;
  line-height: 16px;
  font-size: 13px;
}

body {
  margin: 0;
}

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

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

2 个答案: