javascript - HTML5\CSS - 控制线位于类似注释的文本区域内

Question

我正在尝试使用 CSS 和 HTML 创建一个类似笔记的 textarea。我几乎成功了，但很难控制自定义线条的高度/将文本对齐到线条上方几个像素处。请指教。

HTML:

<div id="textAreaDiv">
    <textarea class="notes" rows="5"></textarea>
</div>

CSS:

#textAreaDiv{
    top: 60px;
    margin: 0 auto;
    width: 800px;
    height: 500px;
    position: relative;
    border: solid 1px blue;
}

.notes {

    padding-bottom: 10px;
    position: relative;
    width: 800px;
    height: 400px;
    background-image: -webkit-linear-gradient(left, white 20px, transparent 20px), -webkit-linear-gradient(right, white 20px, transparent 20px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);

    background-image: linear-gradient(left, white 20px, transparent 20px), linear-gradient(right, white 20px, transparent 20px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
    background-size: 100% 0%, 0% 0%, 10% 50px;
    border: none;
    line-height: 70px;
    font-family: 'Open Sans', sans-serif;
    font-size: 34px;
    resize: none;
    border: solid 1px red;
    letter-spacing: 1px;
}

.notes:focus {
    outline: none;
}

jsfiddle

Answer 1

您应该将 background-position:100% 40%; 添加到您的“notes”class 中。现在，当您更改“notes”class 的 height 时，您可以玩弄这些线条。现在还要更改 line-height，使文本完美地适合行间。

See updated Fiddle here

注意:我只更改了.notes类。

.notes {
  padding-bottom: 10px;
  position: relative;
  width: 800px;
  height: 476px;
  background-position: 100% 40%;
  background-image: -webkit-linear-gradient(left, white 20px, transparent 20px), -webkit-linear-gradient(right, white 20px, transparent 20px), -webkit-linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
  background-image: linear-gradient(left, white 20px, transparent 20px), linear-gradient(right, white 20px, transparent 20px), linear-gradient(white 30px, #ccc 30px, #ccc 31px, white 31px);
  background-size: 100% 0%, 0% 0%, 10% 50px;
  border: none;
  line-height: 54px;
  font-family: 'Open Sans', sans-serif;
  font-size: 34px;
  resize: none;
  border: solid 1px red;
  letter-spacing: 1px;
}

编辑:当您键入很多时，文本会越界。您应该使用 height 和 line-height 来防止这种情况。