通过父div使div透明 [英] Make div transparent through parent div

问题描述

我正在尝试在图像上方和该div内部设置一个div，以使其具有边框或另一个透明的div，以便您可以看到下面的图像。

  .image {background-image：url（https：// picsum。照片/ id / 10/2500/1667）;背景尺寸：封面；背景重复：不重复；高度：400px； width：100％;}。floater {width：400px;高度：100px；背景：蓝色；}。title，.description {填充：10px} .transparent-through {边框底部：4px纯黑色；宽度：90％; margin：auto;}  

 < div class = image > < div class = floater> < div class = title>我的标题< / div> < div class = transparent-through>< / div> < div class = description>简短说明< / div> < / div>< / div>  

我正在尝试使后面的透明 div透明，以便您可以看到父div下方的图像。

，示例如下：

解决方案

您可以使用 linear-gradient

使用多个背景来创建透明部分而无需额外的元素：

  .image {背景图片：url（https://picsum.photos/id/10/2500/1667）;背景尺寸：封面；背景重复：不重复； height：400px;}。floater {width：400px;背景：线性渐变（蓝色，蓝色）0 0/100％50px不重复，线性渐变（蓝色，蓝色）0 100％/ 100％50px不重复，线性渐变（蓝色，蓝色）0 0 / 50px 100％不重复，线性渐变（蓝色，蓝色）100％0 / 50px 100％不重复； } .title，.description {padding：20px}  

 < ; div class = image> < div class = floater> < div class = title>我的标题< / div> < div class = description>简短说明< / div> < / div>< / div>  

使用剪切路径的更棘手的想法：

  .image {背景图片：url（https://picsum.photos/id/10/2500/1667）;背景尺寸：封面；背景重复：不重复； height：400px;}。floater {width：400px; -webkit-clip-path：多边形（0％0％，0％100％，20％100％，20％29％，75％29％，75％69％，20％69％，20％100％，100 ％100％，100％0％）;剪切路径：多边形（0％0％，0％100％，20％100％，20％29％，75％29％，75％69％，20％69％ ，20％100％，100％100％，100％0％）； background：blue;}。title，.description {padding：20px}  

 < div class = image> < div class = floater> < div class = title>我的标题< / div> < div class = description>简短说明< / div> < / div>< / div>  

另一个使用插入框阴影：

  .image {background-图片：url（https://picsum.photos/id/10/2500/1667）;背景尺寸：封面；背景重复：不重复； height：400px;}。floater {width：400px; box-shadow：0 0 0 50px蓝色inset;}。title，.description {padding：20px}  

 < div class = image> < div class = floater> < div class = title>我的标题< / div> < div class = description>简短说明< / div> < / div>< / div>  

您还可以考虑带边框的伪元素：

  .image {背景图片：url（https://picsum.photos/id/10/2500/1667）;背景尺寸：封面；背景重复：不重复； height：400px;}。floater {position：relative;宽度：400px； z-index：0;}。floater：before {content：;位置：绝对；顶：0;左：0;对：0;底部：0; border-width：50px 20px 50px 20px;边框样式：实心；边框颜色：蓝色； z-index：-1;}。title，.description {padding：20px}  

 < div class = image> < div class = floater> < div class = title>我的标题< / div> < div class = description>简短说明< / div> < / div>< / div>  

I'm trying to have a div on top of an image and inside that div to have a border or another div that is transparent so you can see the image below.

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
  width: 100%;
}

.floater {
  width: 400px;
  height: 100px;
  background: blue;
}

.title,
.description {
  padding: 10px
}

.transparent-through {
  border-bottom: 4px solid black;
  width: 90%;
  margin: auto;
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="transparent-through"></div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

I am trying to make the back "transparent-through" div transparent so you can see the image underneath the parent div.

and example is here:

解决方案

You can use multiple background using linear-gradient to create the transparent part without the need of an extra element:

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  width: 400px;
  background: 
  linear-gradient(blue,blue) 0 0/100% 50px no-repeat,
  linear-gradient(blue,blue) 0 100%/100% 50px no-repeat,
  linear-gradient(blue,blue) 0 0/50px 100% no-repeat,
  linear-gradient(blue,blue) 100% 0/50px 100% no-repeat;
 
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Here is a more ticky idea using clip-path:

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  width: 400px;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 29%, 75% 29%, 75% 69%, 20% 69%, 20% 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 29%, 75% 29%, 75% 69%, 20% 69%, 20% 100%, 100% 100%, 100% 0%);
  background:blue;
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

Another one using inset box-shadow:

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  width: 400px;
  box-shadow:0 0 0 50px blue inset;
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

You can also consider pseudo-element with borders:

.image {
  background-image: url(https://picsum.photos/id/10/2500/1667);
  background-size: cover;
  background-repeat: no-repeat;
  height: 400px;
}

.floater {
  position:relative;
  width: 400px;
  z-index:0;
}
.floater:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  border-width:50px 20px 50px 20px;
  border-style:solid;
  border-color:blue;
  z-index:-1;
}

.title,
.description {
  padding: 20px
}

<div class="image">
  <div class="floater">
    <div class="title">
      My Title
    </div>
    <div class="description">
      Short Description
    </div>
  </div>
</div>

这篇关于通过父div使div透明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！