css中如何设置图片压着图片

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS可以让我们很方便的设置图片的位置和大小,但是在有些场景下,需要让图片紧贴着另一张图片,这时候我们就需要使用一些特殊的技巧。.img1 { position: absolute; top: 0;

CSS可以让我们很方便的设置图片的位置和大小,但是在有些场景下,需要让图片紧贴着另一张图片,这时候我们就需要使用一些特殊的技巧。

.img1 {
  position: absolute;
  top: 0;
  left: 0;
}

.img2 {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -10px; /* 这里的值需要根据你的图片大小自己调整 */
} 

以上代码中,我们使用了绝对定位来将图片放在同一个位置。其中,.img1表示第一张图片,.img2表示第二张图片。由于两张图片都使用了绝对定位,所以它们会重叠在一起。

但是由于默认情况下,图片之间会有一定的间隔,所以我们需要使用负的margin值来取消这个间隔,让图片紧贴在一起。

需要注意的是,这种技巧只适用于两张图片大小相同的情况。如果两张图片大小不同,还需要进行额外的处理。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中如何设置图片压着图片

粉丝

0

关注

0

收藏

0

已有0次打赏