如何处理CSS中具有透明空间的重叠图像?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (264)

它可以像下面的图像在CSS覆盖一个空的透明空间,响应和保持比例的图像

提问于
用户回答回答于

我的想法是把图像放两次。

HTML

<div class="trans-cont">
  <img class="trans-img" src="https://www.w3schools.com/w3css/img_lights.jpg" />
  <div class="center">
    <img src="https://www.w3schools.com/w3css/img_lights.jpg" />
  </div>
</div>

CSS

.trans-cont{
  display: inline-block;
  position: relative;
  background-color: #454545;
  width: 40%;
}

.trans-img{
   opacity: 0.3;
   width: 100%;
}

.center{
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  position: absolute;
 overflow: hidden;
}
.center img{
  width: 125%;
  position: absolute;
  top: -12.5%;
  left: -12.5%;
}
用户回答回答于

请尝试如下:

HTML:


   <div class="container">
     <img src="imgSrc" alt="imgName" style="width:100%;">
     <div class="content">
     </div>
   </div>

CSS:


.container {
       position: relative;
       max-width: 100%;
       margin: 0 auto;
   }

   .container img {vertical-align: middle;}

   .container .content{
     position: absolute;
     top: 25%;
     left: 20%;
     width: 60%;
     height: 40%;
     box-shadow: 0 0 0 9rem rgba(0, 0, 0, 0.5);
    }

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动