我正在尝试用交替的行和行号绘制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
来破解行号和备用行背景。
您可以通过将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从顶部定位到占据你的填充顶部。
您可能必须使用渐变的背景大小来使其正确匹配textarea
的行高。
更新至@ DavidThomas的观点,为了帮助您使用交替渐变排列文本,背景大小的高度值应该是textarea的行高的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>