形状使它下面的一切，以及它本身，都是透明的答案

【问题标题】：Shape which makes everything underneath it, and itself, transparent形状使它下面的一切，以及它本身，都是透明的
【发布时间】：2016-05-10 03:39:57
【问题描述】：

我正在尝试查找/制作一些代码，这些代码允许您设置对象及其下方的所有内容，直到背景的不透明度为零。

以下代码创建了一个看起来像这样的网页。

HTML 文件

<!DOCTYPE html>
<html>
    <head>
        <link href="./css/testStyle.css" rel="stylesheet">
    </head>
    <body>
        <div id="layer2"></div>
        <div id="layer3"></div>
    </body>
</html>

CSS 文件

body {
    background-color: red;
    background: -webkit-linear-gradient(left, grey, grey 30%, white 30%, white);
}

#layer2 {
    width: 300px;
    height: 300px;
    background: blue;
    border:solid 1px #fff;
    position: absolute;
    z-index:100;
    top:30px;
    left:150px;
}

#layer3 {
    width: 500px;
    height: 20px;
    background: black;
    border:solid 1px #fff;
    position: absolute;
    z-index:200;
    top:100px;
    left:80px;
}

有没有可能让它看起来像这样。

我研究过类似的东西

#layer3 {
    ...
    opacity: 0.0;
}

但是，这显然只会使 layer3 不可见，而不是它下面的所有内容。

我将不胜感激。

【问题讨论】：

不使用两个DIV的原因？
这将很难管理，因为这不是您可以使用基本 CSS 完成的事情。也许你应该看看 Canvas。
我认为用形状蒙版复制背景并将其用作顶层会更简单。这应该会产生相同的效果。
你可以给第一个盒子一个透明的底部边框，它的高度是你需要的高度吗？不明白为什么你不只是使用另一个 div。
可能可以使用 svg 掩码，但这在 IE 中不起作用

标签： html css transparency opacity

【解决方案1】：

您的要求听起来有点像用透明涂料粉刷墙壁，让房子变得隐形。我认为这不可能与css有关。但是你可以通过使用看起来与底层相同的顶层并使用剪贴蒙版来伪造可能足够好的东西。

展开 sn-p 以查看结果。我更改了背景渐变以使用我的浏览器，但除此之外它与您的代码非常相似。

#layer3 {
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  height: 100%;
  clip: rect(100px, 580px, 120px, 80px);
  width: 100%;
}

body,
#layer3 {
  padding: 0;
  margin: 0;
  background: -webkit-linear-gradient(left, white, black);
  background: -o-linear-gradient(right, white, black);
  background: -moz-linear-gradient(right, white, black);
  background: linear-gradient(to right, white, black);
  z-index: 0;
  position: relative;
}
#layer2 {
  width: 300px;
  height: 300px;
  background: blue;
  border: solid 1px #fff;
  position: relative;
  z-index: 100;
  top: 30px;
  left: 150px;
}
#layer3 {
  padding: 0;
  margin: 0;
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
  height: 100%;
  clip: rect(100px, 580px, 120px, 80px);
  width: 100%;
}

<!DOCTYPE html>
<html>

<head>
  <link href="./css/testStyle.css" rel="stylesheet">
</head>

<body>
  <div id="layer2"></div>
  <div id="layer3">hi</div>
</body>

</html>

【讨论】：

我喜欢你的比喻，这正是我想要做的:)
你知道是否可以用除 css 以外的东西来做到这一点吗？