CSS中合并兩張圖的方法

在CSS中，我們可以使用多種方法來合并兩張圖片，以下是一種常見的方法：

1、使用背景圖像：我們可以將一個(gè)圖像設(shè)置為另一個(gè)圖像的background-image，這樣，兩個(gè)圖像就會(huì)合并在一起，其中一個(gè)圖像會(huì)覆蓋在另一個(gè)圖像上面。

.container {
    width: 200px;
    height: 200px;
    background-image: url('image1.png'), url('image2.png');
    background-position: top left, top right;
}

在這個(gè)例子中，image1.png和image2.png會(huì)合并在一起，image1.png會(huì)覆蓋在image2.png的左側(cè)。

2、使用偽元素：我們可以使用偽元素（如::before或::after）來合并兩個(gè)圖像。

.container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    background-image: url('image1.png');
}
.container::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background-image: url('image2.png');
}

在這個(gè)例子中，image1.png和image2.png會(huì)合并在一起，image1.png會(huì)覆蓋在image2.png的左側(cè)。

方法僅適用于支持CSS背景圖像和偽元素的瀏覽器，如果您需要支持較舊的瀏覽器，可能需要使用其他方法，如使用HTML表格或JavaScript庫來合并圖像。