7

我试着给你一个关于我的问题的广泛画面。假设我的div页面上有一个z-index: 99;, 和background-color: rgba(0,0,0,0.5). 然后我想删除覆盖的一部分div，例如100 x 100px在top: 50px;and中left: 200px;。

通过删除我的意思是排除覆盖的一部分div以使该部分可见并background-color从中删除。

我怎样才能做到这一点？

4

2 回答 2

3

我不确定您是否可以像您描述的那样删除部分背景。相反，您的叠加层可以具有透明背景，并且它可以包含四个 blue-ish-background divs，它们在您想要的孔周围形成一个框架。

这是一些执行此操作的代码：

body {margin: 0; padding: 0}
#main {width: 500px; height: 200px; background: yellow;}
.overlay {background: rgba(0,0,0,0.5); position:absolute;}
#overlay-container { width: 500px; height: 200px; z-index: 99; position: absolute;}
#top {width: 100%; height: 50px}
#left {top:50px; width: 200px; height: 100px}
#right {left: 300px; width: 200px; height: 100px}
#bottom {left: -300px; top: 100px; width: 500px; height: 50px}
<div id="main"/>
<div id="overlay-container">
    <div class="overlay" id="top"/>
    <div class="overlay" id="left"/>
    <div class="overlay" id="right"/>
    <div class="overlay" id="bottom"/>
</div>

您可能可以摆脱overlay-container并简化一些事情。

对于叠加层，您可以只使用<div>具有透明背景和半透明边框的 a。这是另一个例子：

body { margin: 0; padding: 0; }
#background {
    width:500px;
    height:200px;
    background: yellow;
}
#overlay {
    border-color: rgba(0,0,0,0.5);
    border-style: solid;
    border-top-width: 50px;
    border-left-width: 200px;
    border-right-width: 200px;
    border-bottom-width: 50px;
    position: absolute;
    top: 0;
    width: 100px;
    height: 100px;
    z-index: 99;
}
<body>
    <div id="background">some content</div>
    <div id="overlay"></div>
</body>

于 2013-03-10T07:01:13.430 回答
0

你必须像 Ted 的例子那样做一些事情。您可以使用 JavaScript 计算要屏蔽的元素的矩形，并使用该信息来定位覆盖元素。

这是一个使用的快速示例jQuery，

小提琴

另一种方法是使用带有 clearRect 方法的 html 画布，

小提琴

画布解决方案的警告是画布覆盖在元素上，因此不可能例如。鼠标选择div中的内容等。

于 2013-03-10T11:57:24.337 回答