通过父 div 使 div 透明答案

【问题标题】：Make div transparent through parent div通过父 div 使 div 透明
【发布时间】：2019-05-04 03:57:41
【问题描述】：

我正在尝试在图像顶部放置一个 div，并在该 div 内部设置一个边框或另一个透明的 div，以便您可以看到下面的图像。

.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>

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

示例如下：

【问题讨论】：

如果蓝色部分是不透明的，则不能使用辅助<div> 来“切掉”该不透明部分并使其透明。您需要创建一个简单地构成相关形状的元素。这可能需要四个单独的<div> 元素，或者一个<svg>。
不需要小提琴。只需将您的代码放在“code sn-p”中，就在您的问题中。

标签： css

【解决方案1】：

您可以使用linear-gradient 使用多个背景来创建透明部分，而无需额外的元素：

.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>

这是一个使用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>

另一个使用 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>

你也可以考虑带边框的伪元素：

.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>

【讨论】：

clip-path 将是答案
如果“.floater”需要响应式，并且标题和描述可能是1行、2行或3行文本，你会推荐哪一个？
@nad90 这将取决于响应能力......我会考虑前两种方法，我们可以在其中指定百分比值并且全部取决于描述增长时您将如何处理漏洞，它将固定，它会增长，等等？
@TemaniAfif 保持“透明”div，如何将线性渐变或背景图像添加到“浮动”div？我尝试使用 box-shadow，但看起来我只能为其分配颜色而不是线性渐变或图像

【解决方案2】：

一个技巧可能是从边框元素的阴影中绘制背景颜色。（参见 css cmets）

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

.floater {
  width: 400px;
  height: 100px;
  overflow: hidden; /*keep children shadow inside*/
  margin: auto
}

.title,
.description {
  padding: 10px;
  position: relative; /* on top of sibblings shadows*/
}

.transparent-through {
  border-bottom: 4px solid transparent;
  box-shadow: 0 0 0 100px blue; /* tune color and area to fill unblured. here set to blue and 100px around */
  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>

【讨论】：

似乎@vals 比你更快：p
@TemaniAfif 直到现在才看到他的答案 ;) ... 正在寻找关于 codepen 的旧示例，我不喜欢你很难只搜索自己的笔的方式....（也许时间寻找另一个在线代码编辑器）......我终于找到了一个例子;）codepen.io/gc-nomade/pen/nKAka并放弃寻找其他人
是的，我知道，我在开玩笑 ;) ...至少你没有选择我的渐变创意，我知道你是他们的粉丝：p
@TemaniAfif 我想过，但文字大小或长度可能会有所不同；)
@G-Cyr 我最终使用了 svg ......问题是带有剥离线的背景。我为它使用了一个线性渐变，它在 box-shadow 中不受支持。我尝试使用剪辑路径，但 svg 在这种情况下要好得多。唯一的问题是它没有响应。

【解决方案3】：

将蓝色背景创建为透明元素的阴影。

在浮子上设置溢出隐藏以防止它向外扩展

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

.floater {
  margin-top: 20px;
  width: 400px;
  height: 150px;
  overflow: hidden;
}

.title,
.description {
  padding: 10px
}

.transparent-through {
  height: 60px;
  width: 90%;
  margin: auto;
  box-shadow: 0px 0px 0px 100px blue;
}

<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>

【讨论】：

我们也可以考虑在主容器上插入 box-shadow 并避免额外的元素
@TemaniAfif inset shadow 需要固定大小，因此阴影会在预期的位置停止，外部阴影是管理此问题的最流畅和最短的方法；)
@G-Cyr 我们仍然可以使用多个插入阴影并控制大小jsfiddle.net/45592hz0/1 ;)

【解决方案4】：

使父 div 位置：相对和 z-index：0，并使子 div 位置：绝对和 z-index：10

这是一个例子，按照这个例子你可以做到。

.check
{
position:relative;
width:100%;
height:50%:
z-index:0;
}
.check img
{
width:100%;
height:50%;
}
.form-box
{
    position: absolute;
    top:0;
    right:0;
    background-color:rgba(255,255,255,0.8);
    z-index:10;
    height:100%;
    padding-top:40px;
    width:50%;
}

<html>
<div class="check">
<img src="https://cdn.vox-cdn.com/thumbor/th5YNVqlkHqkz03Va5RPOXZQRhA=/0x0:2040x1360/1200x800/filters:focal(857x517:1183x843)/cdn.vox-cdn.com/uploads/chorus_image/image/57358643/jbareham_170504_1691_0020.0.0.jpg">
</div>
<div class="form-box">
<h1>BISWAJIT</h1>
</div>

【讨论】：