用repeating-linear-gradient实现淡雅横线背景需控制线条粗细（1px）、间距（≥1.5em）、透明度（如rgba(0,0,0,0.08)），设background-attachment: local防滚动漂移，并针对textarea与contenteditable差异调整line-height、font-size及对齐，禁用resize和border，通过父容器relative定位与background层叠避免覆盖，结合clamp()响应式调节行高与background-size，且不因减少动画偏好而关闭。
怎么用纯 CSS 实现淡雅横线背景（不是图片）
直接用 repeating-linear-gradient 画横线，比贴图更轻量、可缩放、易调色。关键不是“加背景”，而是控制线条粗细、间距和透明度，避免干扰文字阅读。
- 线条高度建议设为
1px，间距至少1.5em（约 24px），太密会像格子纸 - 颜色用
rgba(0,0,0,0.08)这类低饱和度灰，别用纯黑或深灰，否则打字时眼睛容易累 - 务必设置
background-attachment: local，否则滚动时线条会跟着文字“漂移”，观感错乱
textarea 和 contenteditable 区域的适配差异
横线背景在两种编辑容器里表现不同：前者是表单控件，后者是富文本区域，行高和基线对齐逻辑不一样。
- 对
textarea，直接给line-height设为1.6左右，并用padding-top微调首行对齐，让第一根线出现在首行文字下方 - 对
contenteditable的div，必须加line-height+font-size显式声明，否则浏览器默认行高可能撑开线条间距 - 两者都要禁用
resize（resize: none）和默认边框（border: none），不然横线会被遮挡或错位
防止横线被文字内容覆盖的 z-index 陷阱
横线是背景，但某些字体渲染或内联样式（比如带 background-color 的 span）会盖住它。这不是 bug，是层叠上下文导致的。
- 不要给编辑区域本身设
z-index，它没定位就无效；正确做法是给父容器加position: relative，再用background层叠顺序控制 - 如果内容里有高亮标记（如
mark标签），需额外给它设background-color带一点透明度（如rgba(255,220,100,0.7)），避免完全吃掉横线 - 移动端 Safari 对
repeating-linear-gradient渲染稍慢，可加will-change: background-position提前提示优化
响应式下横线间距的断点处理
小屏设备行宽变窄，固定 1.5em 间距可能显得太疏，大屏又可能太密。不能只靠媒体查询改 background-size，得联动行高。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
clamp()控制行高：例如line-height: clamp(1.4, 1.6vw + 1.2, 1.8)，让间距随视口自然缩放 - 横线背景尺寸同步用
background-size: 100% clamp(20px, 3vw, 32px)，保证小屏线条不糊、大屏不空 - 别在
@media (prefers-reduced-motion: reduce)下关掉横线——它不是动画，关了反而降低可读性
