网页制作css平铺

CSS 平铺背景的方法

使用 background-repeat 属性可以轻松实现背景图像的平铺效果。默认情况下，背景图像会在水平和垂直方向上重复。

body {
  background-image: url('image.jpg');
  background-repeat: repeat;
}

控制平铺方向

通过调整 background-repeat 的值，可以控制平铺的方向：

• repeat-x：仅在水平方向平铺
• repeat-y：仅在垂直方向平铺
• no-repeat：不平铺，只显示一次

div {
  background-image: url('pattern.png');
  background-repeat: repeat-x; /* 水平平铺 */
}

背景定位

结合 background-position 可以调整平铺的起始位置：

section {
  background-image: url('tile.png');
  background-repeat: repeat;
  background-position: 20px 10px;
}

现代CSS方案

使用 background 简写属性可以更简洁地实现平铺：

.container {
  background: url('texture.jpg') repeat 0 0;
}

渐变背景平铺

CSS渐变也可以创建无缝平铺效果：

body {
  background: repeating-linear-gradient(
    45deg,
    #f5f5f5,
    #f5f5f5 10px,
    #e5e5e5 10px,
    #e5e5e5 20px
  );
}

响应式平铺技巧

确保平铺背景适应不同屏幕尺寸：

.hero {
  background: url('large-pattern.jpg');
  background-repeat: repeat;
  background-size: 300px 200px;
}

性能优化

对于平铺背景，使用小尺寸的重复图案比大图像更高效：

footer {
  background: url('small-tile.png') repeat;
  /* 100x100像素的图案比大图更高效 */
}