css两张背景图片并列居中

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

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

在网站设计过程中,经常会用到背景图片,而有时候需要将两张背景图片并排居中,这就需要用到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实现两张背景图片并排居中的方法。希望对大家有所帮助。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两张背景图片并列居中

粉丝

0

关注

0

收藏

0

已有0次打赏