[分享]css两张图片拼接成一张

CSS可以将两张图片拼接成一张，这样可以减少页面加载两张图片的延迟，同时也方便对图片进行处理。 / 先定义两张图片的样式 / .img1 { width: 200px; height: 200px; ...

CSS可以将两张图片拼接成一张，这样可以减少页面加载两张图片的延迟，同时也方便对图片进行处理。

 /* 先定义两张图片的样式 */
    .img1 {
        width: 200px;
        height: 200px;
        background-image: url(1.jpg);
        float: left;
    }
    .img2 {
        width: 200px;
        height: 200px;
        background-image: url(2.jpg);
        float: left;
    }

    /* 接着定义拼接后的样式 */
    .merge {
        width: 400px;
        height: 200px;
        background-image: url(1.jpg), url(2.jpg);
        background-size: 200px 200px, 200px 200px;
        background-position: 0px 0px, 200px 0px;
    } 

以上代码演示了如何将两张宽高为200px的图片，横向拼接起来组成一张宽400px、高200px的图片。在拼接时需要用到background-image、background-size、background-position三个属性。

其中background-image指定了图片的来源，多个图片用逗号隔开。background-size指定了每个背景图片的大小，两个宽度都为200px、高度都为200px。background-position指定了背景图片的位置，第一个在x轴0位置，y轴0位置，第二个在x轴200位置，y轴0位置。

总之，通过CSS拼接两个图片，可以方便地实现图片处理，也可以提高页面加载速度。