[分享]css两张图片重合成一张图

CSS中有一个很有用的技巧，即将两张图片重合在一起成为一张图片，这可以通过使用CSS的background属性来实现。/ HTML代码 / / CSS代码 / .image { width: 图片宽...

CSS中有一个很有用的技巧，即将两张图片重合在一起成为一张图片，这可以通过使用CSS的background属性来实现。

/* HTML代码 */
<div class="image"></div>

/* CSS代码 */
.image {
    width: 图片宽度;
    height: 图片高度;
    background: url(第一张图片路径) no-repeat, url(第二张图片路径) no-repeat;
    background-position: 经过计算后的第二张图片相对于第一张图片的位置;
} 

在代码中，我们需要将两张图片路径分别设置为背景，并且通过background-position属性来调整第二张图片的位置。为了更好地理解位置的计算，以下是一个实例，假设我们有两张200x200的图片，需要将第二张图片放在第一张图片的右下角：

/* HTML代码 */
<div class="image"></div>

/* CSS代码 */
.image {
    width: 200px;
    height: 200px;
    background: url(first.jpg) no-repeat, url(second.jpg) no-repeat;
    background-position: 0 0, 100% 100%;
} 

在上述代码中，我们设置第一张图片位于背景的左上角（0 0），第二张图片位于背景的右下角（100% 100%），也就是第一张图片的右下角。

最后，通过这种方法，我们可以用两张图片合成一张完整的图片，同时避免在HTML中使用img标签加载多张图片，提高网页性能。