![](/img/trans.png)
[英]How do I prevent sliced images in the CSS background from sitting on each other?
[英]CSS: How do I prevent the background color of div from going behind the image it is sitting above?
我有一個div,我對其應用了負邊距,以便它位於圖像的頂部。 我還給div設置了背景色。 發生的是(div的文本)出現在div上方,正如我所期望的那樣,但是該div的背景色在圖像后面,這是我所不希望的。 我怎樣才能使div的背景色位於圖像上方? * *:before *:after
規則來自引導程序。 我知道我本可以使用絕對定位,但我內心深處知道負邊距完全合法。
這是我的證明:
http://jsfiddle.net/BB4d2/1/
HTML:
<ul class="profile-kids">
<li class="profile-kid">
<img class="f" src="http://lorempixel.com/g/300/300/people/" height="150" width="150">
<div class="kid-text">Girl</div>
</li>
<li class="profile-kid">
<img class="f" src="http://lorempixel.com/g/300/300/people/" height="150" width="150">
<div class="kid-text">Girl</div>
</li>
<li class="profile-kid">
<img class="m" src="http://lorempixel.com/g/300/300/people/" height="150" width="150">
<div class="kid-text">Boy</div>
</li>
</ul>
CSS:
*, *:before, *:after {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul.profile-kids {
list-style-type: none;
padding-left: 0px;
}
li.profile-kid {
display: inline-block;
margin-bottom: 20px;
margin-right: 10px;
cursor: pointer;
}
img.f {
z-index: 0;
border: 10px solid rgb(254, 134, 164);
border-radius: 75px;
display: inline-block;
}
img.m {
border: 10px solid rgb(120, 192, 249);
border-radius: 75px;
display: inline-block;
}
div.kid-text {
background: #FFFFFF;
text-align: center;
width: 150px;
font-size: 20px;
margin-top: -100px;
}
只需分配position: relative;
到div.kid-text
div.kid-text {
background: #FFFFFF;
text-align: center;
width: 150px;
font-size: 20px;
margin-top: -100px;
position: relative;
z-index: 999; /* Optional */
}
另外,您可以使用z-index: 999;
為了安全...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.