css background 多个属性示例

当设置 `background` 属性时，你可以同时指定多个属性值来创建复合效果。以下是几个示例：

1. 使用颜色和图片作为背景：

div {
  background: #f2f2f2 url("image.jpg") no-repeat center center;
}

此示例将背景设置为灰色 (`#f2f2f2`)，并在中心位置重复平铺名为 "image.jpg" 的背景图片。

2. 使用线性渐变背景：

div {
  background: linear-gradient(to right, #ff0000, #00ff00);
}

此示例创建了一个从红色 (`#ff0000`) 到绿色 (`#00ff00`) 的水平渐变背景。

3. 添加背景图像的平铺方式和大小：

div {
  background-image: url("pattern.png");
  background-repeat: repeat-x;
  background-size: 200px 100px;
}

此示例使用名为 "pattern.png" 的背景图像，并将其沿水平方向重复平铺 (`repeat-x`)。同时，还指定了背景图像的大小为 200 像素宽度和 100 像素高度。

4. 使用背景颜色和多个背景图像：

div {
  background: #fff url("pattern1.png") repeat-x top left,
              url("pattern2.png") repeat-y bottom right;
}

此示例设置背景颜色为白色 (`#fff`)，并在左上角重复平铺名为 "pattern1.png" 的背景图像。另外，还在右下角重复平铺名为 "pattern2.png" 的背景图像。

这些示例展示了如何使用多个属性值来设置背景效果。你可以根据需要组合不同的属性来创建自定义的背景样式。