网页制作css平铺

平铺背景的实现方法

使用background-repeat属性
CSS中background-repeat属性控制背景图像的重复方式。默认值为repeat，表示在水平和垂直方向平铺。其他可选值包括：

• repeat-x：仅水平方向平铺
• repeat-y：仅垂直方向平铺
• no-repeat：不平铺

示例代码：

body {
  background-image: url("pattern.png");
  background-repeat: repeat; /* 默认值，可省略 */
}

平铺纹理或图案的技巧

无缝拼接图案设计
确保背景图片边缘无缝衔接。设计时使用对称或渐变图案，避免硬边缘。推荐工具：

• Photoshop的图案生成器
• 在线工具如Patternify或CSS3 Pattern Gallery

小尺寸优化
平铺图片建议使用小于100px的小文件，减少加载时间。例如：

div {
  background-image: url("tile-30x30.png");
}

使用CSS渐变替代图片

线性渐变平铺
通过repeating-linear-gradient创建纯CSS平铺效果，无需图片：

.bg-stripes {
  background: repeating-linear-gradient(
    45deg,
    #606dbc,
    #606dbc 10px,
    #465298 10px,
    #465298 20px
  );
}

径向渐变平铺
使用repeating-radial-gradient实现圆点图案：

.bg-dots {
  background: repeating-radial-gradient(
    circle,
    #ffcc00,
    #ffcc00 10px,
    #333 10px,
    #333 20px
  );
}

响应式平铺方案

视口单位适应
结合background-size使用vw/vh单位，使平铺适应屏幕尺寸：

.responsive-tile {
  background-image: url("texture.jpg");
  background-size: 20vw 20vh;
}

媒体查询调整
针对不同设备调整平铺密度：

@media (max-width: 768px) {
  .adaptive-tile {
    background-size: 15px 15px;
  }
}

高级平铺控制

background-attachment固定效果
使平铺背景固定或随内容滚动：

.parallax {
  background-attachment: fixed;
  background-repeat: repeat;
}

多背景层叠
叠加多个平铺层创造复杂效果：

.layered {
  background: 
    url("grid.png") repeat,
    url("noise.png") repeat;
  opacity: 0.9;
}