css 多张背景图

CSS中，我们可以使用多张背景图来装饰网页。

使用单张背景图很容易实现。但若使用多张背景图就需要用到CSS3中的多背景属性了。

.jumbotron {
      height: 350px;
      background-image: url("bg1.jpg"), url("bg2.jpg");
      background-size: cover, contain;
      background-position: center, 0 0;
      background-repeat: no-repeat, repeat;
}
    

代码中，我们通过background-image来定义多张背景图，并通过逗号隔开它们。

background-size属性用来指定每张背景图的显示方式，这里bg1.jpg采用cover，bg2.jpg采用contain。

background-position属性用来指定每张背景图的位置，这里bg1.jpg居中显示，bg2.jpg从（0，0）开始平铺。

background-repeat属性用来指定每张背景图的重复或不重复，这里bg1.jpg不重复，bg2.jpg水平方向平铺。

我们可以在需要使用多张背景图的元素上应用这些CSS属性，同时可以根据需要调整每张背景图的属性，为页面增添美感和多样性。

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