我试着向你展示我的问题.假设我的页面上有一个覆盖div,其中z-index:99;,背景色:rgba(0,0.5).然后我想删除一部分叠加div,例如100 x 100px in top:50px;并离开:200px;.
删除我的意思是排除重叠div的一部分以使该部分可见并从中删除背景颜色.
我怎样才能做到这一点?
解决方法
我不确定你能否像你描述的那样删除部分背景.相反,您的叠加层可以具有透明背景,并且它可以包含四个蓝色背景div,它们围绕您想要的孔形成一个框架.
这是执行此操作的一些代码:
body {margin: 0; padding: 0} #main {width: 500px; height: 200px; background: yellow;} .overlay {background: rgba(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>
您可以摆脱覆盖容器并简化一些事情.
对于叠加层,您可以使用< div>透明背景和半透明边框.这是另一个例子:
body { margin: 0; padding: 0; } #background { width:500px; height:200px; background: yellow; } #overlay { border-color: rgba(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>