[英]CSS aligning background-image above background-color set in *:before and *:after
I'm making a little Go board, in just CSS, and have got a problem when I put a counter on a point. 我只用CSS制作了一个Go板,当我将计数器放在一个点上时遇到了问题。
HTML: HTML:
<div class="GoBoard">
<div class="aa black"></div>
<div class="ab"></div>
<div class="ba"></div>
<div class="bb white"></div>
</div>
CSS: 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}
I used the .GoBoard>div as the #cross from this question . 我使用.GoBoard> div作为该问题的#cross。 And the !important's were to show that this question doesn't work.
重要的是要表明这个问题不起作用。 Adding position: relative;
新增职位:相对; to the .white, with !important takes it out of the board, and without makes no difference.
到.white,带有!important可以将其从面板中取出,并且没有任何区别。 I also tried moving the .white, up the CSS and changing it to .white:before, the former made no difference, and the latter changed the cross line to the color of the circle.
我还尝试将.white移到CSS上并将其更改为.white:之前,前者没有区别,而后者将交叉线更改为圆圈的颜色。
I can think of changing the HTML and CSS to have another class for the cross, but I would prefer if the cross would go below the image. 我可以考虑将HTML和CSS更改为十字形有另一个类,但是如果十字形会在图像下方,我会更喜欢。 Or having a new div for the cross, which seems like a bit of a waist of a div if you can get this close without it.
或为十字架设置一个新的div,如果没有它,则看起来有点像div的腰部。
tl;dr: How do I get the counter (background-image) above the board cross (background-color)? tl; dr:如何使计数器(背景图像)位于木板十字(背景颜色)上方?
I setup this JSFiddle . 我设置了这个JSFiddle 。
Basically, you will only need 2 z-index
's defined in your CSS: 基本上,您只需要在CSS中定义2个
z-index
:
.GoBoard{
z-index: 0;
}
.GoBoard>div:before, .GoBoard>div:after {
z-index: -1;
}
The one you have defined under .white
selector is unnecessary. 您在
.white
选择器下定义的.white
是不必要的。 Also, this is a pretty awesome pure CSS setup! 另外,这是一个非常棒的纯CSS设置!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.