我有以下HTML代码:
<div class="caption_center">
<h1 class="caption_header font-alpha">Robíme Váš svet pohodlnejší</h1>
<p class="caption_regular font-alpha">Dovolte nám presvedčiť Vás o tom</p>
<div class="caption_center_Background"></div>
</div>
使用以下CSS:
.caption_center {
position: absolute;
height: auto;
text-align: center;
color: white;
left: 20%;
top: 50%;
-moz-transform: translate(0,-50%);
-ms-transform: translate(0,-50%);
-o-transform: translate(0,-50%);
-webkit-transform: translate(0,-50%);
transform: translate(0,-50%);
width: 60%;
/*background: rgba(138, 138, 138, 0.55);*/
padding-top:1em;
}
.caption_center_Background {
position:absolute;
width:100%;
height:100%;
top:0;
background-color:black;
opacity:1;
z-index:0;
}
.caption_header {
z-index:999;
}
.caption_regular {
z-index:998;
}
这导致以下结果:
我想要达到的目标(最终)是这个黑盒子的不透明度为0.5,文本将在这个黑盒子前面。这样,无论我的图像背景是什么,用户仍然可以看到文字(这就是半透明黑匣子的原因)。
尽管如此,即使我已经指定了我的z-index,我仍然无法强制将文本放在黑色div框的前面。我还尝试将框作为第一个元素(意味着它在h1
和p
元素之前),但没有变化。
我在这里做错了什么?
P.S。我试图模仿the following fiddle。
答案 0 :(得分:3)
z-index
没有问题,但您需要指定position
才能生效。设置position
属性的值对于工作至关重要,因为z-index
对position
为static
的元素(position
的默认值)没有影响属性)。
来自CSS Tricks :(强调是我的)
CSS中的z-index属性控制重叠元素的垂直堆叠顺序。如同,在哪一个看起来好像它在物理上更接近你。 z-index仅影响位置值不是静态的元素(默认值) 。
.caption_center {
position: absolute;
height: auto;
text-align: center;
color: white;
left: 20%;
top: 50%;
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
width: 60%;
/*background: rgba(138, 138, 138, 0.55);*/
padding-top: 1em;
}
.caption_center_Background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-color: black;
opacity: 0.5;
z-index: 0;
}
.caption_header {
position: relative;
z-index: 999;
}
.caption_regular {
position: relative;
z-index: 998;
}
&#13;
<div class="caption_center">
<h1 class="caption_header font-alpha">Robíme Váš svet pohodlnejší</h1>
<p class="caption_regular font-alpha">Dovolte nám presvedčiť Vás o tom</p>
<div class="caption_center_Background"></div>
</div>
&#13;
另一种选择是在z-index
上设置否定.caption_center_Background
。这样就不需要将高z-index
定位(或)设置为具有该文本的其他两个元素。
.caption_center {
position: absolute;
height: auto;
text-align: center;
color: white;
left: 20%;
top: 50%;
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
width: 60%;
/*background: rgba(138, 138, 138, 0.55);*/
padding-top: 1em;
}
.caption_center_Background {
position: absolute;
width: 100%;
height: 100%;
top: 0;
background-color: black;
opacity: 0.5;
z-index: -1;
}
&#13;
<div class="caption_center">
<h1 class="caption_header font-alpha">Robíme Váš svet pohodlnejší</h1>
<p class="caption_regular font-alpha">Dovolte nám presvedčiť Vás o tom</p>
<div class="caption_center_Background"></div>
</div>
&#13;
答案 1 :(得分:2)
您只需将文本放在此背景div中。
这是一个更新的代码段:
.caption_center {
position: absolute;
height: auto;
text-align: center;
color: white;
left: 20%;
top: 50%;
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-o-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
width: 60%;
/*background: rgba(138, 138, 138, 0.55);*/
padding-top: 1em;
}
.caption_center_Background {
position: absolute;
width: auto;
height: auto;
top: 0;
background-color: black;
opacity: 0.5;
z-index: 0;
}
/*.caption_header {
z-index: 999;
}
.caption_regular {
z-index: 998;
}*/
&#13;
<div class="caption_center">
<div class="caption_center_Background">
<h1 class="caption_header font-alpha">Robíme Váš svet pohodlnejší</h1>
<p class="caption_regular font-alpha">Dovolte nám presvedčiť Vás o tom</p>
</div>
</div>
&#13;
这样您就不会遇到任何position
或z-index
问题,也不要忘记给出背景div,即所需的样式opacity : 0.5;
。< / p>
这应该可以解决问题。
答案 2 :(得分:1)
请试试这个......
.caption_header {
position: relative;
z-index:999;
}
.caption_regular {
position: relative;
z-index:998;
}
&#13;