[分享]css两张图片怎么合在一起

CSS是前端开发中一项非常重要的技能，掌握好CSS可以让我们轻松地实现各种炫酷的效果，今天我们来分享一下如何将两张图片合在一起显示。 以上是HTML结构，我们在一个包裹元素中放入了两张图片。但...

CSS是前端开发中一项非常重要的技能，掌握好CSS可以让我们轻松地实现各种炫酷的效果，今天我们来分享一下如何将两张图片合在一起显示。

<div class="wrapper">
    <img src="image1.jpg" alt="猫咪">
    <img src="image2.jpg" alt="狗狗">
</div> 

以上是HTML结构，我们在一个包裹元素中放入了两张图片。但是这样显示出来是并排的，我们需要用到CSS来让它们合在一起。

.wrapper{
    position: relative;
    display: inline-block;
}
.wrapper img{
    position: absolute;
    top: 0;
    left: 0;
}
.wrapper img:last-child{
    position: absolute;
    top: 0;
    left: 100%;
} 

以上是CSS样式，我们给包裹元素设置position: relative，这是为了内部元素定位做准备。然后给两张图片设置position: absolute，并且都设置top: 0和left: 0，这样它们就会叠在一起。最后，我们再给第二张图片设置left: 100%，这样它就会出现在第一张图片的右边。

到这里，两张图片就顺利合在一起了。这种方法不仅可以用于图片，还可以用于文字、图标等元素的组合显示，具有很好的灵活性和扩展性。