如何利用HTML创建动态背景斜纹_通过CSS repeating渐变属性-html教程-PHP中文网

repeating-linear-gradient倾斜条纹易错在颜色停靠点未“硬切”（如red 4px, blue 4px须严格相等）、45deg导致高dpr屏锯齿、未用百分比+background-size匹配周期，以及ie兼容时缺fallback方案。

如何利用html创建动态背景斜纹_通过css repeating渐变属性

repeating-linear-gradient 倾斜条纹写法容易错在哪

直接写 repeating-linear-gradient(45deg, red 0, red 4px, blue 4px, blue 8px) 很可能出不来清晰斜纹——不是发虚就是变纯色。根本原因是颜色停靠点没“硬切”，浏览器一插值，边界就糊了。

必须保证相邻两个停靠点的数值完全相等，比如 red 4px, blue 4px，中间不能有空隙、不能有偏移。45deg 方向在高 DPR 屏上还容易锯齿，尤其条纹窄于 2px 时。

to right 比 45deg 更稳，Safari 兼容更好
优先用百分比： red 0%, red 50%, blue 50%, blue 100%，再配 background-size: 20px 20px 控制密度
容器高度不能为 0，加 min-height: 20px 快速验证是否渲染塌陷

斜纹背景要动起来，background-position 还是 transform？

想让斜纹滚动，background-position 动画最轻量，但只适用于单向平移；如果需要旋转或缩放节奏感更强的动态效果，得用伪元素 + transform: rotate() + animation 组合。

例如斜纹平移动画：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

div {
  background: repeating-linear-gradient(
    to right, 
    #ff0080 0%, #ff0080 10%, 
    transparent 10%, transparent 20%
  );
  background-size: 40px 40px;
  animation: slide 4s linear infinite;
}
@keyframes slide {
  0% { background-position: 0 0; }
  100% { background-position: 40px 40px; }
}

动画周期必须和 background-size 匹配，否则会跳帧或断层
background-position 动画在 Chrome/Firefox 上 GPU 加速友好，IE11 不支持，需降级为 JS fallback
若用 transform: rotate() 动画伪元素，注意父容器 overflow: hidden 防止旋转溢出

IE10–11 怎么兼容 repeating-linear-gradient 斜纹

IE 完全不识别 repeating-linear-gradient，但可以用 linear-gradient + background-size 模拟出等效重复效果，关键在于手动写出一个完整周期，并靠 background-size 控制平铺密度。

比如实现 4px 红白斜纹（模拟 45deg）：

.ie-fallback {
  background: linear-gradient(
    45deg,
    #ff0000 0px, #ff0000 2px,
    #ffffff 2px, #ffffff 4px
  );
  background-size: 4px 4px;
}