我正在制作一个Go Go板,只用CSS,当我把一个计数器放在一个点上时遇到了问题。
HTML:
<div class="GoBoard">
<div class="aa black"></div>
<div class="ab"></div>
<div class="ba"></div>
<div class="bb white"></div>
</div>
CSS:
.GoBoard{
position:relative;
background-color: #630;
width: 100px;
height: 100px;
}
.GoBoard>div{
position: absolute;
width: 50px;
height: 50px;
}
.GoBoard>div:before, .GoBoard>div:after {
content: "";
position: absolute;
z-index: 0;
background-color: #000;
}
.GoBoard>div:before {
left: 50%;
width: 2%;
margin-left: -1%;
height: 100%;
}
.GoBoard>div:after {
top: 50%;
height: 2%;
margin-top: -1%;
width: 100%;
}
.white{
border-radius: 50%;
background-color:none!important;
z-index: 1!important;
background-image: -moz-radial-gradient(15px 15px 45deg, circle cover, #ddd 0%, #555 100%)!important;
background-image: -webkit-radial-gradient(15px 15px, circle cover, #ddd, #555)!important;
background-image: radial-gradient(15px 15px 45deg, circle cover, #ddd 0%, #555 100%)!important;
}
.black{
border-radius: 50%;
background-image: -moz-radial-gradient(15px 15px 45deg, circle cover, #333 0%, #000 100%);
background-image: -webkit-radial-gradient(15px 15px, circle cover, #333, #000);
background-image: radial-gradient(15px 15px 45deg, circle cover, #333 0%, #000 100%);
}
.aa{bottom:0px;left:0px}
.ab{bottom:50px;left:0px}
.ba{bottom:0px;left:50px}
.bb{bottom:50px;left:50px}
我使用.GoBoard&gt; div作为this question的#cross。并且!重要的是表明this question不起作用。将position: relative;添加到.white中,使用!important将其从板中取出,并且没有任何区别。我也尝试移动.white,然后将CSS更改为.white:之前,前者没有任何区别,后者将交叉线更改为圆圈的颜色。
我可以考虑将HTML和CSS更改为另一个用于交叉的类,但我更喜欢交叉将在图像下方。或者为十字架设置一个新的div,如果你能在没有它的情况下接近它,那就好像是一个div的腰部。
tl;博士:我如何得到电路板上方的背景图像(背景图像)?
答案 0 :(得分:1)
我设置了 JSFiddle 。
基本上,您只需要在CSS中定义2个z-index
:
.GoBoard{
z-index: 0;
}
.GoBoard>div:before, .GoBoard>div:after {
z-index: -1;
}
您在.white
选择器下定义的那个是不必要的。此外,这是一个非常棒的纯CSS设置!