HTML怎么做条纹背景_html CSS条纹纹理背景实现（通俗易懂）

repeating-linear-gradient 是实现条纹背景最省事的纯 CSS 方案，通过定义颜色区间周期（如 0%–10% 深色、10%–20% 浅色）自动平铺，支持水平、竖直、斜向条纹；需注意 background-size 匹配周期长度、IE 降级用 linear-gradient + background-size、移动端加 image-rendering 防模糊。

用 repeating-linear-gradient 最省事

纯 CSS 实现条纹背景，repeating-linear-gradient 是首选。它比拼接多张小图或 SVG 更轻量，也比用 background-image: linear-gradient 手动重复写几层更可控。

关键不是“怎么画一条线”，而是“怎么让一组颜色区间自动平铺”。比如水平条纹：从顶部开始，0% 到 10% 是深色，10% 到 20% 是浅色，然后重复——这正好是 repeating-linear-gradient 的设计逻辑。

• repeating-linear-gradient(to bottom, #3498db 0%, #3498db 10%, #ecf0f1 10%, #ecf0f1 20%) 就能生成 10% 高的蓝白交替条纹
• 想调条纹宽度？改百分比数值就行，比如把 10% 换成 5% 就变细，换成 25% 就变宽
• 方向用 to right 可得竖条纹，45deg 得斜条纹——但注意斜条纹容易出现边缘锯齿，真要斜纹建议用 background-size 配合微调

别直接套用网上“万能代码”，小心 background-size 冲突

很多教程一上来就给个带 background-size: 20px 20px 的例子，结果你贴进项目里发现条纹错位、拉伸或根本看不见——大概率是父容器有 background-size 继承或重置，或者你同时用了 background-image 多层叠加，CSS 层叠规则让其中一层被覆盖了。

稳妥做法是显式声明完整背景链：

立即学习“前端免费学习笔记（深入）”；

div {  background-image: repeating-linear-gradient(    to bottom,    #2c3e50 0px,    #2c3e50 4px,    #34495e 4px,    #34495e 8px  );  background-size: auto 8px; /* 必须匹配 gradient 中的周期长度 */}

这里用像素单位（4px）比百分比更直观，background-size: auto 8px 确保每 8px 高度完整重复一次，避免因容器高度非整数倍导致截断。

IE 不支持 repeating-linear-gradient？用 linear-gradient + background-size 降级

IE10+ 支持 linear-gradient，但不支持 repeating- 前缀版本。可以手动构造一个“单周期渐变”，再靠 background-size 控制平铺密度：

• 写一个高为 20px 的双色渐变：linear-gradient(to bottom, #e0e0e0 0%, #e0e0e0 10px, #ffffff 10px, #ffffff 20px)
• 再设 background-size: 100% 20px，让它垂直方向每 20px 平铺一次
• 注意：IE 对 background-size 的百分比解析有 bug，建议用固定像素值，如 20px 而非 100% 20px（后者在某些 IE 版本下失效）

移动端缩放时条纹发虚？关掉 image-rendering 干扰

部分安卓 WebView 或旧版 Safari 在页面缩放时，会把 CSS 渐变当图像处理，触发模糊插值。如果条纹边缘看起来毛糙、不锐利，加一行就能压住：

div {  image-rendering: -webkit-optimize-contrast;  image-rendering: crisp-edges;}

这两行不冲突，前者兼容老 WebKit，后者是标准属性。它们告诉浏览器：“别给我插值，按像素硬边渲染”。对条纹、像素风、图表刻度线这类需要清晰边界的设计很关键。

真正麻烦的是斜条纹配合高 DPR 屏幕——此时即使写了 crisp-edges，GPU 渲染路径仍可能引入亚像素偏移。这种场景不如直接上 SVG pattern，控制力更强。