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

Question

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

6

我正在尝试绘制具有交替行和行号的

。一个非常简单的解决方案是如下所示-请查看<a href="https://dev59.com/s3I-5IYBdhLWcg3wJE0K">此处</a>了解更多详细信息。

<p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><textarea rows="10" cols="40"></textarea></code></pre>
</div>
</div>
</p>

<p>如果要在<code>textarea</code>中交替显示行，则只需简单地</p>

<p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><textarea rows="10" cols="40"></textarea></code></pre>
</div>
</div>
</p>

<p>两种解决方案都可以正常工作，但将它们结合起来就比较棘手，因为两者都利用了<code>background</code>来破解行号和交替行背景。</p>

- loretoparisi

你能否将两个文本区域放在一起，且外部的包含div带有滚动条？ - freedomn-m

2个回答

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>

- Quentin Veron

1

这种方法的问题在于，在输入字符、按回车键换行，然后继续输入时，用户只能在交替的行号上输入文本，这是一种略微奇怪的用户体验（https://i.stack.imgur.com/oeFYQ.png）；还有填充。 :) - David Thomas

你说得对。我这里只是提供了合并两张图片的解决方案。 - Quentin Veron

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- zgood · Accepted Answer

您可以通过将 textarea 包装在一个 div 中，然后将去除背景样式分配给该包装 div，以便使这两个背景像层叠一样。

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，并将背景渐变位置设置在距离顶部10像素处，以适应你的padding-top。

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

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