[分享]css中如何添加多个图片

CSS可以通过多种方式来添加多个图片到页面中，下面介绍几种常见的方法：

1. 使用background-image属性

 .box {
    background-image: url(../images/img1.jpg), url(../images/img2.jpg);
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
    background-size: 50%, 100%;
    /* 第一个图片占用宽度的50%, 第二个图片占用整个父容器的宽度*/
  } 

2. 使用::before和::after伪元素

 .box::before {
    content: "";
    background-image: url(../images/img1.jpg);
    background-size: cover;
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
  }
  
  .box::after {
    content: "";
    background-image: url(../images/img2.jpg);
    background-size: cover;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
  } 

3. 使用标签

 <div class="box">
    <img src="../images/img1.jpg" alt="image 1">
    <img src="../images/img2.jpg" alt="image 2">
  </div>
  
  .box {
    display: flex;
    justify-content: space-between;
  }
  
  .box img {
    width: 48%;
    /* 去掉边距之后才能占用整个容器的宽度，这里设置为48%即可*/
  }