使它下面的一切和它本身透明的形状

Question

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

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

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 不可见，而不是它下面的所有内容。

如果能帮我完成这个，我将不胜感激。

Answer 1

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

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

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

使它下面的一切和它本身透明的形状

Shape which makes everything underneath it, and itself, transparent

html

css

transparency

opacity