Question

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

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

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>

形状使其下面的一切，本身，透明

1 个答案: