Javascript HTML5\CSS-控制行在类似注释的文本区域内的位置

我正在尝试使用CSS和HTML创建一个类似

textarea

的注释。我几乎成功了，但很难控制自定义线条的高度/将文本对齐到线条上方几个像素的位置。请告知

HTML:

---

您应该添加

背景位置：100%40%到您的“笔记”
类
。
现在，当您更改“notes”
类的
高度时，可以播放这些行。
现在还要更改
行高
，使文本在行之间完美匹配


注意：我只更改了
.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;
}

编辑：
当你大量打字时，文本会横线。
您应该使用
高度
和
线条高度
来防止这种情况。
您应该添加
背景位置：100%40%到您的“笔记”
类
。
现在，当您更改“notes”
类的
高度时，可以播放这些行。
现在还要更改
行高
，使文本在行之间完美匹配


注意：我只更改了
.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;
}

编辑：
当你大量打字时，文本会横线。
你应该使用
高度
和
线条高度
来防止这种情况。
我找到了一个很好的例子来说明你想要什么。只需将您的样式替换为：

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

.notes{
        border: 1px solid #EEEEEE;
        box-shadow: 1px 1px 0 #DDDDDD;
        display: block;
        font-family: 'Arial';
        font-size: 22px;
        line-height: 50px;
        margin: 2% auto;
        padding: 11px 20px 0 70px;
        resize: none;
        height: 689px;
        width: 530px;

        background-image: -webkit-linear-gradient(transparent, transparent 49px, #E7EFF8 0px);
        background-image: -moz-linear-gradient(transparent, transparent 49px, #E7EFF8 0px);
        background-image: -o-linear-gradient(transparent, transparent 49px, #E7EFF8 0px);
        background-image: linear-gradient(transparent, transparent 49px, #E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46% , circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%); 

        -webkit-background-size:  100% 50px;
        background-size: 100% 50px;
    }

我找到了一个很好的例子来说明你想要什么。只需将您的样式替换为：

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

.notes{
        border: 1px solid #EEEEEE;
        box-shadow: 1px 1px 0 #DDDDDD;
        display: block;
        font-family: 'Arial';
        font-size: 22px;
        line-height: 50px;
        margin: 2% auto;
        padding: 11px 20px 0 70px;
        resize: none;
        height: 689px;
        width: 530px;

        background-image: -webkit-linear-gradient(transparent, transparent 49px, #E7EFF8 0px);
        background-image: -moz-linear-gradient(transparent, transparent 49px, #E7EFF8 0px);
        background-image: -o-linear-gradient(transparent, transparent 49px, #E7EFF8 0px);
        background-image: linear-gradient(transparent, transparent 49px, #E7EFF8 0px), -moz-radial-gradient(4% 50%, circle closest-corner, #f5f5f5, #f5f5f5 39%, transparent 0%), -moz-radial-gradient(3.9% 46% , circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%); 

        -webkit-background-size:  100% 50px;
        background-size: 100% 50px;
    }

我想这就是你想要的

CSS

HTML与您的相同，您可以使用此值更改字体大小等，以满足您的需要
我想这就是你想要的

CSS

HTML与您的相同，您可以使用此值更改字体大小等，以满足您的需要

#textAreaDiv{
    margin: 0 auto;
    width: 400px;
    height: 210px;
    position: relative;
    background:repeating-linear-gradient( to bottom, #f9f9f9, #f9f9f9 20px, #cccccc 21px);
}
#textAreaDiv:before{
    content: "";
    display: inline-block;
    height: 100%;
    width: 4px;
    border-left: 4px double #FCA1A1;
    position: absolute;
    left: 30px;
}
.notes {
    display:block;
    left:0;
    top:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
    background:transparent;
    border: none;
    line-height: 21px;
    font-family: 'Open Sans', sans-serif;
    font-size: 20px;
    resize: none;
    letter-spacing: 1px;
    box-shadow:0 0 1px #999;
    outline:none;
    padding-left:35px;
    padding-bottom:21px
}