css在图片右边加图片

CSS是前端开发中的重要一环，使用CSS可以实现各种各样的效果。本篇文章将介绍如何在图片右边加入其它图片，让我们一同了解一下吧。

.image-container {
    position: relative;
    display: inline-block;
}
.image-container img {
    display: block;
    width: 100%;
    height: auto;
}
.image-container:after {
    content: "";
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-image: url("right-image.png");
    background-size: contain;
    background-repeat: no-repeat;
}
    

以上就是实现的关键代码了，我们可以对它进行一些解释。

首先，我们将容器设置为position:relative; display:inline-block; ，这样图片就可以在此基础上进行定位。

其次，我们对img进行了基本样式设置，宽度为100%，高度自适应。

大家看到代码中，我们使用了一个:before伪元素，它的作用就是在容器后面添加了一张图片。

:before伪元素的content属性是必需的，而且是必需设置为一个字符串，否则浏览器将不会渲染伪元素。而我们将它设为空就可以了。

接着，我们使用了position:absolute进行定位，right: -50px使它和图片右边距离有50px，top: 50%将它上下居中，transform: translateY(-50%)是在容器中间居中。

最后，我们使用background-image指定了图片链接，background-size设置了大小，background-repeat设置了不重复出现。

这样，我们的样式就实现了，可以在使用中对它进行调整。

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