Question

这或多或少是scaled down version of what I got，但它不是我想要的，因为我希望绿色div部分透明，所以我将能够看到这两个div背后的任何内容（示例中没有，但在我的项目中有）。但是另一个div阻止了我的观点，那么我将如何'剪掉'那个div的一部分？

只是想一想，甚至可能有更好的方法来解决这个问题。

以防链接被破坏：

HTML：

<div id="foregrounddiv2"></div>
<div id="foregrounddiv"></div>

CSS：

#foregrounddiv2 {
  background-color:grey;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index:2;
}
#foregrounddiv {
  background-color: green;  
  position: fixed;
  z-index: 3;  
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

更新：很抱歉误会。我所谈论的文字位于两个div之后。对于错误的命名也很抱歉。我不希望#foregrounddiv2 div上有任何不透明度，我只希望能够通过#foregrounddiv查看内容。希望我有意义。

Answer 1

你想要的是灰色div中的一个洞，洞位于绿色div的位置？

如果是这样，你不能直接这样做，你必须制作4个灰色div并安排他们的位置在屏幕上“留下”一个洞。

Answer 2

我认为还有另一种方法可以在div上打个洞。

定义一个非常宽的div边框，然后你会有一个“洞”

像这样：http://jsfiddle.net/chanjarster/pG9Uy

Answer 3

此解决方案does not work in all browsers（IE目前不支持剪辑路径）。

您可以在使用中看到它here

（Here's另一个显示图层的版本）

它使用剪辑路径从div中切出一个洞（在你的情况下为灰色div），显示透明div，透明div下面是文本。

创建剪切片的主要代码如下：

#test {
  -webkit-clip-path: polygon(
    0 0,
    70px 0,
    70px 150px,
    150px 150px,
    150px 70px,
    70px 70px,
    70px 0,
    200px 0,
    200px 200px,
    0 200px,
    0 0
  );
  clip-path: polygon(
    0 0,
    70px 0,
    70px 150px,
    150px 150px,
    150px 70px,
    70px 70px,
    70px 0,
    200px 0,
    200px 200px,
    0 200px,
    0 0
  );

  height: 200px;
  width: 200px;
  background-color:red;
  position:absolute;
  left: 0;
  right: 0;
}

您可以使用练习和方格纸或使用剪辑路径工具创建所需的任何形状。

An example我使用自定义polygon tool的不良艺术技巧。

Answer 4

你所说的并不像剪辑，而是更像不透明。

只需将opacity: 0.5;属性添加到#foreground样式规则即可完成工作。

Answer 5

您的问题不明确，但我认为您正在寻找opacity

这里是demo http://jsfiddle.net/TarQq/3/

希望它会对你有所帮助。

如何使用CSS“剪掉”div的一部分？

5 个答案: