image.png

藍(lán)色的橫線是背景圖片，文字是寫在text area里面，但是手機(jī)寬高是不同的，所以導(dǎo)致文字和后面的藍(lán)色橫線會(huì)重疊。

解決方法：
首先是橫線背景，切圖只需要切一條線的圖就夠了，圖片設(shè)計(jì)高度是48px,保留上面那條藍(lán)線。
把切圖作為text area的背景，background： url(....) repeat;

把基本的樣式寫好后，就是最重要的一步了，textarea的line-height和background-size;

如果光是設(shè)置文本框行高，是解決不了問(wèn)題的，換一個(gè)寬高不同的手機(jī)，文字和背景立刻就會(huì)錯(cuò)亂，重疊在一起。

所以，設(shè)置文本框行高的同時(shí)，還是需要設(shè)置background-size，而且line-height和background-size的值，必須是固定值，也就是多少px。

設(shè)置固定值的思路：
假設(shè)手機(jī)的尺寸和設(shè)計(jì)圖一樣，是750*1334，那么text area的line-height設(shè)置成48px,文本框背景的background-size設(shè)置成100% 48px; 這樣的設(shè)置，文本和背景肯定能對(duì)齊。

再假設(shè)，手機(jī)的尺寸和設(shè)計(jì)圖的一半，是375*667，那么text area的line-height設(shè)置成24px,文本框背景的background-size設(shè)置成100% 24px; 這樣的設(shè)置，文本和背景也肯定能對(duì)齊。

從這里就可以看出其中的關(guān)系了，就是一個(gè)比例的問(wèn)題。

用js來(lái)解決：

// vue文件
<textarea class="text-area" v-model="writeText" :style="textareaStyle"></textarea>

// backgroundSize: '100% 24px', lineHeight: '24px'
const dpi = window.innerWidth / 750;
const n = Math.floor(48 * dpi);
this.textareaStyle = {
      backgroundSize: `100% ${n}px`,
      lineHeight: `${n}px`
};