css两张背景图片居中

在设计网页时，我们经常需要对网页进行美化处理，比如添加一些背景图片来增加网页的美观度。但是有时候只有一张背景图片并不能完全满足我们的需求，我们可能需要两张背景图片来叠加达到需要的效果。本文将介绍CSS如何同时居中两张背景图片。

background-image: url('first-background-image.jpg'), url('second-background-image.jpg');
background-position: center center, center center;
background-repeat: no-repeat, no-repeat; 

首先，在CSS中，我们可以使用background-image属性同时定义两张背景图片，我们只需要在url()括号中添加两张图片的地址即可。接下来，我们需要使用background-position属性来使两张图片同时居中，它的取值有两个：`x轴位置 y轴位置`，我们只需要将两张图片的取值都设置为`center center`即可实现同时居中。最后，我们使用background-repeat属性来防止两旁的图片出现重复的情况。

另外，还有一种方法是使用CSS3中的background-size属性来控制两张图片的大小，可以将第一个图片的大小设置为100% 100%，第二个图片的大小设置为80% 80%，这样第二个图片就会比第一个小，从而达到叠加效果。

background-image: url('first-background-image.jpg'), url('second-background-image.jpg');
background-position: center center, center center;
background-repeat: no-repeat, no-repeat;
background-size: 100% 100%, 80% 80%; 

这种方法不仅可以让两张图片同时居中，还可以根据实际需要控制图片的大小、透明度等属性，从而实现更为复杂的效果。