网页制作css平铺

CSS 平铺背景的方法

使用 background-repeat 属性
设置 background-repeat: repeat; 可以让背景图像在水平和垂直方向平铺。这是默认行为，无需额外声明即可实现平铺效果。

固定平铺方向
通过 background-repeat: repeat-x; 或 background-repeat: repeat-y; 可以限制平铺方向为仅水平或仅垂直。适用于条纹或渐变背景的特定需求。

控制平铺起始位置
结合 background-position 调整平铺的起始点。例如 background-position: 20px 10px; 会让图像从距离左上角 (20px, 10px) 的位置开始平铺。

平铺图案的优化技巧

无缝拼接图案设计
选择或设计无缝拼接的图案素材（如 .png 或 .jpg），确保平铺时边缘无视觉割裂。推荐使用专业工具如 Photoshop 的“偏移滤镜”测试无缝效果。

调整背景尺寸
通过 background-size 控制平铺单元的尺寸。例如 background-size: 50px 50px; 会将图像缩放到指定大小后平铺，适合调整图案密度。

代码示例

/* 基础平铺 */
.tiled-bg {
  background-image: url("pattern.png");
  background-repeat: repeat;
}

/* 水平平铺条纹 */
.horizontal-stripe {
  background-image: url("stripe.png");
  background-repeat: repeat-x;
}

/* 自定义平铺单元 */
.custom-tile {
  background-image: url("tile.png");
  background-repeat: repeat;
  background-size: 30px 30px;
}

响应式平铺注意事项

高分辨率适配
为 Retina 屏幕提供 2 倍尺寸的图案，通过 @media 查询切换：

@media (-webkit-min-device-pixel-ratio: 2) {
  .retina-bg {
    background-image: url("pattern@2x.png");
    background-size: 50px 50px; /* 原始图案物理尺寸的一半 */
  }
}

动态内容兼容性
避免在可滚动区域内使用复杂平铺图案，可能引发性能问题。建议对固定区域（如 body 或头部）应用平铺背景。