如何实现Div穿透父级Div透明，显示下方图片？

没问题，我帮你搞定这个需求！你想要在背景图上方放一个悬浮的div，同时在这个div里加个边框或者透明层来透出下方的图片，对吧？我整理了完整的实现代码，你可以直接参考使用：

HTML结构 #

<div class="image">
  <div class="floater">
    <div class="transparent-through">
      <h2 class="title">这是标题</h2>
      <p class="description">这是描述文字，透过透明层能看到下方的图片哦</p>
    </div>
  </div>
</div>

CSS样式 #

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
  width: 100%;
  /* 用flex让内部的悬浮div居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.floater {
  width: 400px;
  height: 100px;
  /* 给悬浮层加半透明蓝色背景，也可以改成transparent完全透明 */
  background: rgba(0, 0, 255, 0.2);
  display: flex;
  align-items: center;
}

.title, .description {
  padding: 10px;
  margin: 0;
  color: #fff;
  text-shadow: 0 0 3px #000; /* 加文字阴影让内容更清晰 */
}

.transparent-through {
  border-bottom: 4px solid black;
  background: transparent; /* 完全透明，透出下方背景图 */
  width: 90%;
  margin: auto;
}

额外调整技巧 #

• 如果想要整个透明层带完整边框（不止底部），把border-bottom: 4px solid black改成border: 4px solid black就行，这样整个容器只有边框，内部完全透出背景图。
• 要是不需要floater的背景色，直接把background: rgba(0,0,255,0.2)改成background: transparent即可。
• 如果你不想用flex布局居中，也可以用绝对定位的方式：

  .image {
    position: relative; /* 父容器设相对定位 */
  }
  .floater {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 实现完美居中 */
  }
  

内容的提问来源于stack exchange，提问作者nad90