css两张图片重叠一张透明

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

CSS中可以实现两张图片重叠在一起,同时还可以设置其中一张图片为透明效果。 .container { position: relative; } img { position: absolute; t

CSS中可以实现两张图片重叠在一起,同时还可以设置其中一张图片为透明效果。

  .container {
      position: relative;
    }

    img {
      position: absolute;
      top: 0;
      left: 0;
    }

    .overlay-img {
      opacity: 0.6;
    } 

以上代码中,我们先创建了一个容器并设置其为相对定位,这是因为后面设置绝对定位的元素需要相对于其父元素进行定位。

接着,我们通过设置两张图片的绝对定位,让它们重叠在一起,同时可以通过调整top和left来达到想要的位置效果。

最后,通过设置覆盖图的opacity属性,让其透明度为0.6,从而呈现出透明的效果。

下面是HTML部分的代码,其中覆盖图需要放在后面作为后面的图片。

  <div class="container">
      <img src="IMAGE1.jpg" alt="图片1"/>
      <img src="IMAGE2.jpg" alt="图片2" class="overlay-img"/>
    </div> 

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: css两张图片重叠一张透明

粉丝

0

关注

0

收藏

0

已有0次打赏