3

这或多或少是我得到的缩小版本，但这不是我想要的，因为我希望绿色 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 后面。也很抱歉命名不好。我不希望#foregrounddiv2div 有任何不透明度，我只想能够通过#foregrounddiv. 希望我说得通。

4

5 回答 5

1

你想要的是灰色div上的一个洞，这个洞在绿色div的位置？

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

于 2012-10-06T09:03:01.813 回答
1

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

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

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

于 2012-10-06T09:41:40.610 回答
1

此解决方案不适用于所有浏览器（IE 当前不支持剪辑路径）。

你可以在这里看到它的使用

（这是显示图层的另一个版本）

它使用剪辑路径从 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;
}

您可以通过一些练习和方格纸或使用剪辑路径工具来创建您想要的任何形状。

我使用自定义多边形工具的艺术技能不佳的一个例子。

于 2013-11-05T19:56:54.120 回答
0

你所说的听起来不像剪辑，而更像是不透明度。

只需将opacity: 0.5;属性添加到您的#foreground样式规则即可。

于 2012-10-06T06:04:24.697 回答
0

你的问题不清楚，但我认为你正在寻找opacity

这是演示http://jsfiddle.net/TarQq/3/

希望它会帮助你。

于 2012-10-06T06:07:07.497 回答