[分享]css两张背景图片并列居中

在网站设计过程中，经常会用到背景图片，而有时候需要将两张背景图片并排居中，这就需要用到CSS实现了。下面将介绍如何使用CSS实现两张背景图片并排居中。/ 使用CSS实现两张背景图片并排居中 / .ba...

在网站设计过程中，经常会用到背景图片，而有时候需要将两张背景图片并排居中，这就需要用到CSS实现了。下面将介绍如何使用CSS实现两张背景图片并排居中。

/* 使用CSS实现两张背景图片并排居中 */

.background {
    background-image: url("image1.jpg"), url("image2.jpg");
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
    background-size: 50%, 50%;
    width: 100%;
    height: 500px;
} 

首先，我们给一个包含两张背景图片的div加上一个类名，这里使用了“background”。然后，在CSS中使用“background-image”属性来指定两张背景图片的文件路径，使用逗号隔开。接下来，使用“background-position”属性来指定每张图片的位置，这里设置为左居中和右居中。使用“background-repeat”属性来指定图片不重复，最后使用“background-size”属性来指定图片大小为50%。

由于两张图片的宽度加起来可能超过父元素的宽度，因此我们需要给父元素设置宽度100%。最后再设置一个高度，实现两张图片并排居中的效果。

以上就是使用CSS实现两张背景图片并排居中的方法。希望对大家有所帮助。