**一、基础语法及属性**
要在CSS中进行图片平铺，主要依赖于`background-image`, `repeat`, 和 `background-size`这三个核心样式属性：
1. **background-image**: 用于设置需要展示为背景图的URL地址。
css
.example {
background-image: url('your/image/path.jpg');
}
2. **background-repeat**: 决定当尺寸大于其容器时，背景图像是否应该重叠（即“平铺”）及其方式。可选值有：
- repeat (默认): 在水平和垂直方向上都重复平铺；
.tile-example {
background-repeat: repeat;
}
- no-repeat：不重复，在任何轴向上只绘制一次图像；
- repeat-x 或 repeat-y：分别仅沿x轴(横向)或者y轴(纵向)重复背景图案。
3. **background-size**: 控制单个背景图像的大小。若要使小图连续无缝拼接形成大区域覆盖，则可以设定此参数使其适应容器宽度/高度或是固定像素单位来达到平铺的效果。
css
.cover-tile {
background-size: cover; /* 图像会尽可能地调整到完全覆盖背景区 */
// 或者指定具体数值来进行等比缩放后平铺
.stretch-tile{
background-size: auto 50px; /* 指定了背景图的高度，并保持宽高比例自动计算宽度 */
}
// 百分比形式则按照父级容器百分比来确定背景图大小
.percentage-tile {
background-size: 10% 40%;
}
}
**二、进阶应用**
- 部分平铺（节段性背景）
有时我们可能希望背景图片不是在整个区域内无限制地平铺，而是按一定规律排列，这时可以通过结合负 margin 及 padding 等方法配合 background-position 属性控制每个副本的位置。
css
.patterned-background {
width: 600px;
height: 800px;
background-image: url(pattern.png);
background-repeat: repeat-x;
background-position: left bottom;
& > * {
position: relative;
&:nth-child(even){
margin-top: -100px;
}
}
}
以上代码使得pattern.png每行只会有一张并且从底部开始逐行往上堆砌生成一种特殊的背景模式。
- 多背景叠加与混合平铺
现代浏览器还支持多层背景定义，这意味着我们可以同时添加多个背景并在它们之间自由组合不同的平铺规则。
css
.complex-pattern {
background:
linear-gradient(#ff0, #f9c),
url(tileable_pattern.svg),
url(icon.gif);
background-repeat:no-repeat,
repeat-x,
round;
background-position:center top, center right, right bottom;
background-size:auto, contain, cover;
}
// 这样就会创建一个包含渐变色、SVG纹理和平铺图标三合一的独特背景风格。
总之，通过灵活运用上述CSS特性，开发者能够轻松自如地对网页中的各种元素施加丰富的图文混排效果，让静态页面变得生动有趣的同时也提升了用户体验。对于设计师而言，理解并掌握这些技术手段无疑有助于提升作品的表现力和技术内涵。
标签： css中图片平铺
