用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 区域的适配差异

横线背景在两种编辑容器里表现不同：前者是表单控件，后者是富文本区域，行高和基线对齐逻辑不一样。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 对 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) 下关掉横线——它不是动画，关了反而降低可读性

横线背景真正难的不是画出来，是让它“存在感刚好够用，又彻底不抢戏”。调色、间距、滚动行为、内容覆盖这四点漏掉任何一环，用户写两行字就会觉得别扭。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！