如何减少div的一部分
我试图给你一个关于我的问题的广泛图片。 假设我的页面上有一个覆盖div
,其z-index: 99;
, background-color: rgba(0,0,0,0.5)
。 然后我想要移除覆盖div
的一部分,例如top: 50px;
100 x 100px
top: 50px;
和left: 200px;
。
通过删除我的意思是排除覆盖div
的一部分,使该部分可见,并从中删除background-color
。
我怎样才能做到这一点?
我不确定你可以像你描述的那样删除部分背景。 相反,您的叠加层可以具有透明背景,并且可以包含四个蓝色背景div
,它们围绕您想要的洞形成框架。
这里有一些代码可以做到这一点:
HTML:
<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>
CSS:
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}
你或许可以摆脱overlay-container
并简化一些东西,但我没有想象力在深夜做这件事。 ;-)
编辑
好的,这太复杂了。 对于叠加层,只需使用具有透明背景和半透明边框的<div>
。 这是一个例子:
HTML:
<body>
<div id="background">some content</div>
<div id="overlay"></div>
</body>
CSS:
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;
}
你必须像Ted的例子那样做。 您可以使用JavaScript计算要屏蔽的元素的矩形,并使用该信息定位叠加元素。
这里有一个使用jQuery
的简单例子,
小提琴
另一种方法是使用带有clearRect方法的HTML画布,
小提琴
对于画布解决方案的警告是,画布覆盖在元素上,因此不可能例如。 鼠标选择div等内容
链接地址: http://www.djcxy.com/p/69903.html