css在图片上再加图片

CSS在图片上添加背景图片是一种常用的技巧。但是，有时候我们需要把一张小图片放在大图片的某个位置上。这时候，我们可以使用CSS在图片上再加图片的方法。

.img-container{
    position: relative;
}
.img-container img{
    display: block;
}
.img-container .icon{
    position: absolute;
    right: 10px;
    top: 10px;
}
    

首先，我们需要在大图片的容器上设置position: relative; ，这样它里面的元素就可以使用绝对定位了。然后，我们将大图片设置为display: block; ，让它成为块级元素，方便我们设置宽高和margin。接着，我们在大图片的容器里面添加一个小图片，我们将它命名为.icon。然后，我们给它设置position: absolute; ，让它脱离文档流。最后，我们设置right: 10px; 和top: 10px; ，表示小图片位于大图片的右上角。

接下来，我们来看一下HTML代码：

div class="img-container">
    img src="big.jpg" alt="">
    img src="icon.png" alt="" class="icon">
    /div>

我们在img-container中添加了两张图片，一张是大图片，一张是小图片。最后，我们来看一下效果：

.img-container{
    position: relative;
    width: 350px;
}
.img-container img{
    display: block;
    width: 350px;
    height: auto;
}
.img-container .icon{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 50px;
    height: 50px;
}
    

这个例子中，我们在一张350×150的图片上添加了一个50×50的小图片，并将它放在了右上角。你可以根据自己的需求来调整各种参数，比如大图片的宽高、小图片的宽高和位置，来实现更多效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！