gpt4 book ai didi

css - 如何剪切一部分div

转载 作者:技术小花猫 更新时间:2023-10-29 11:12:15 25 4
gpt4 key购买 nike

我尽量让您大致了解我的问题。假设我的页面上有一个覆盖层 divz-index: 99;background-color: rgba(0,0,0,0.5)。然后我想删除覆盖 div 的一部分,例如 top: 50px;left: 200px; 中的 100 x 100px

我所说的删除是指排除覆盖 div 的一部分以使该部分可见并从中删除 background-color

我该怎么做?

最佳答案

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

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

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>具有透明背景和半透明边框。这是另一个例子:

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>

关于css - 如何剪切一部分div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15319780/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com