我有以下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/
感谢@AlvaroMenéndez,我得以完成自己想做的事情。这是我的问题的解决方案:
HTML:
<div id="wrapper">
<div id="wrap">
<div id="shape"></div>
</div>
<div id="wrap2">
<div id="shape2"></div>
</div>
<div id="shape3">
<button id="plus" class="btn">+</button>
<button id="minus" class="btn">-</button>
</div>
<div id="left-menu"></div>
<div id="top-menu"></div>
</div>
CSS:
#shape {
width:200px;
height:200px;
position:fixed;
overflow:hidden;
top: 0;
left: 0;
}
#shape:before {
content:" ";
position:absolute;
width:100%;
height:100%;
left:15%; top:15%;
border-radius:50%;
box-shadow:0 0px 0 250px rgba(255,255,255,0.6);
}
#left-menu{
background: rgba(255,255,255,0.6);
width: 59px;
height: 200px;
position: fixed;
top:200px;
left: 0;
}
#top-menu{
position: fixed;
top: 0;
left: 200px;
background: rgba(255,255,255,0.6);
width: 300px;
height: 59px;
}
#shape2 {
width: 140px;
height: 140px;
position: fixed;
top: 60px;
left: 60px;
}
#shape2:before {
content: " ";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0 0px 0 20px rgba(255,255,255,0.6);
}
#shape3{
position: fixed;
top: 69px;
left: 69px;
}
.btn{
border: none;
display: block;
margin: 1px;
background: rgba(255,255,255,0.6);
width:120px;
height: 60px;
font-weight: 700;
font-size: 17px;
}
.btn:hover{
background: #fff;
}
#plus{
border-radius: 100px 100px 0 0;
}
#minus{
border-radius: 0 0 100px 100px;
}
工作示例:https : //jsfiddle.net/L9aeu4o3/
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句