gpt4 book ai didi

html - 如何在几个div上做透明背景以查看父背景

转载 作者:太空宇宙 更新时间:2023-11-04 03:07:46 24 4
gpt4 key购买 nike

我有以下 CSS 代码:

#wrapper{
height:500px;
background: url('http://i.imgur.com/f1uCUEJ.jpg');
}
#menu:before{
width:500px;
height:60px;
background: rgba(255,255,255,0.6);
content: "";
position: fixed;
top:0;
left: 0;
border-radius: 0 0 10px 0;
}
#menu{
position: fixed;
top:60px;
left: 0;
background: rgba(255,255,255,0.6);
height: 300px;
width: 60px;
border-radius: 0 0 10px 0;
}
#circle{
position: fixed;
width:150px;
height:150px;
border-radius: 150px;
background: #000;
top: 10px;
left: 10px;
}
#circle2{
position: fixed;
width:120px;
height:120px;
border-radius: 120px;
background: #fff;
top: 25px;
left: 25px;
}
#circle3{
position: fixed;
width:90px;
height:90px;
border-radius: 90px;
background: #000;
top: 40px;
left: 40px;
}

#circle4{
position: fixed;
top: 54px;
left: 54px;
}
.btn{
border: none;
display: block;
margin: 1px;
background: #fff;
width:60px;
height: 30px;
font-weight: 700;
font-size: 17px;
}
#plus{
border-radius: 30px 30px 0 0;
}
#minus{
border-radius: 0 0 30px 30px;
}

以及以下 HTML 代码:

<div id="wrapper">
<div id="menu"></div>
<div id="circle">
<div id="circle2">
<div id="circle3">
<div id="circle4">
<button id="plus" class="btn">+</button>
<button id="minus" class="btn">-</button>
</div>
</div>
</div>
</div>
</div>

你能帮我理解如何实现解决方案,这将使“透明”的黑圈,我只能看到图像吗?如果我现在将这种黑色设为 - background: rgba(0,0,0,0)。我可以看到“菜单”栏,但我不想看到它们。

示例链接如下:http://jsfiddle.net/88Uxw/122/

最佳答案

这是您要找的吗? <强> FIDDLE

基本上不是使用一个在另一个里面的背景圆圈,而是制作带边框的黑色并将“白色”圆圈设置为没有任何背景:

#circle{
position: fixed;
width:150px;
height:150px;
border-radius: 150px;
border: 15px solid #000;
box-sizing: border-box;
top: 10px;
left: 10px;
}

#circle2{
position: fixed;
width:120px;
height:120px;
border-radius: 120px;
top: 25px;
left: 25px;
}

#circle3{
position: fixed;
width:90px;
height:90px;
border-radius: 90px;
border: 15px solid #000;
box-sizing: border-box;
top: 40px;
left: 40px;
}

#circle4{
position: fixed;
top: 54px;
left: 54px;
}

.btn{
border: none;
display: block;
margin: 1px;
background: transparent;
width:60px;
height: 30px;
font-weight: 700;
font-size: 17px;
border-bottom:1px solid #000;
}

不要忘记添加 box-sizing: border-box; 以将边框保持在固定大小的容器内。

关于html - 如何在几个div上做透明背景以查看父背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30125320/

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