[分享]css中如何设置两个背景

CSS中我们可以设置多个背景，以展现更加复杂的视觉效果。通过background属性，我们可以为一个元素设置一个或多个背景图片。下面就让我们来看看如何设置一个元素的两个背景。 .example { b...

CSS中我们可以设置多个背景，以展现更加复杂的视觉效果。通过background属性，我们可以为一个元素设置一个或多个背景图片。下面就让我们来看看如何设置一个元素的两个背景。

 .example {
    background-image: url(background1.png), url(background2.png);
    background-size: contain, cover;
    background-repeat: no-repeat, repeat;
    background-position: center, top right;
  } 

上面代码中，我们为元素.example设置两个背景图片，分别是background1.png和background2.png。其中，background-size属性设置了两种不同的大小显示方式。contain表示图片将保持其原始尺寸显示，但是尽可能大地适应元素的对应维度，而cover则会将图片拉伸以填充整个元素的可见区域。background-repeat属性控制两个背景图片的重复方式。no-repeat表示不重复，而repeat表示重复。background-position属性定义元素上两个背景图片的初始位置。center表示居中，top right表示贴在右上方。

在使用多个背景图片时，需要注意它们的叠放顺序。如果没有指定z-index属性，那么后设置的背景图片将覆盖先设置的背景图片。我们可以使用逗号分隔符调整它们的顺序，如：background-image: url(background2.png), url(background1.png)，这样background2.png就会位于background1.png上面。