css多图片背景图

CSS 多图片背景图是一种在一个元素中使用多个背景图片的方法，它可以为网页增添更多细节和美感。下面就让我们来学习如何使用 CSS 多图片背景图吧。

div {
      background-image: url(bg-img1.jpg), url(bg-img2.jpg);
     /* 设置多个背景图片，用逗号隔开 */  background-position: center center, top left;
     /* 设置每个背景图片的位置，用逗号隔开 */  background-repeat: no-repeat, repeat;
     /* 设置每个背景图片是否重复，用逗号隔开 */  background-size: cover, auto;
 /* 设置每个背景图片的尺寸，用逗号隔开 */}
    

在上面的例子中，我们设置了一个 `` 元素，它有两个背景图片（`bg-img1.jpg` 和 `bg-img2.jpg`）。我们使用逗号隔开每个背景图片，并用 `background-image` 属性将它们设置在一个元素中。

我们在 `background-position` 属性中设置每个背景图片的位置。第一个值是水平位置，第二个值是垂直位置。我们用逗号隔开每个背景图片的位置，使它们对应到正确的图片上。

在 `background-repeat` 属性中，我们可以设置每个背景图片是否重复。如果我们只想让第一个背景图片不重复，我们可以使用 `no-repeat`。如果我们希望第二个背景图片重复，我们可以使用 `repeat`。

最后，在 `background-size` 属性中，我们可以设置每个背景图片的尺寸。如果我们希望第一个背景图片占据整个元素的大小，我们可以使用 `cover`。如果我们希望第二个背景图片保持原始尺寸，我们可以使用 `auto`。

总的来说，在使用 CSS 多图片背景图时，我们需要为每个背景图片设置适当的位置、重复和尺寸。使用逗号隔开每个属性可以让我们轻松地控制每个背景图片。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！