css实现上下两个背景图合并成一个背景图

一：需求 css实现上下两个背景图合并成一个背景图

二：实现代码

<div class="container-supplier">
</div>

 .container-supplier {
            width: 1200px;
            display: flex;
            .home-notice {
                width: 60%;
            }
            .Policies-Regulations {
                width: 412px;
                height: 320px;
                position: relative;
                background: white;
                &::before,
                &::after {
                    content: '';  
                    position: absolute;  
                    top: 0;  
                    left: 0;  
                    right: 0;  
                    bottom: 0;  
                    background-repeat: no-repeat;
                    height: 100%;
                    background-size: contain;
                };
                &::before {  
                    background-image: url('xxx路径一');  
                    z-index: 1;
                    background-position: top;
                  }  
                &::after {  
                    background-image: url('xxx路径二');  
                    z-index: 0;  
                    background-position: bottom;
                  }
            }
        }

background-size: contain; 是 CSS 中的一个属性值，用于设置背景图像的大小。当设置为 contain 时，背景图像会被缩放，以确保图像的完整显示，同时图像的长宽比也会被保持。具体来说，背景图像会尽可能地填充元素的背景区域，但不会超出它，同时图像的宽高比不会被扭曲。

如果背景图像的原始尺寸小于元素的背景区域，使用 contain 会导致图像居中显示，并在图像的四周留下空白（如果背景没有设置其他颜色或图像的话）。如果背景图像的原始尺寸大于元素的背景区域，图像会按比例缩小以适应元素，但仍然保持其完整的外观。

这个属性特别有用，当你想要确保背景图像不被裁剪或拉伸以适应不同的屏幕尺寸或元素大小时。然而，需要注意的是，使用 contain 可能会导致背景图像看起来较小，特别是当元素的背景区域较大时。---参考文心一言AI

background-position: bottom; 设置背景图位置

background-repeat: no-repeat; 设置背景图是否重复