css – 如何削减div的一部分

我试着向你展示我的问题.假设我的页面上有一个覆盖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>

原文地址：https://www.jb51.cc/css/215075.html

css – 如何削减div的一部分

解决方法

相关推荐