Question

我正在开发我的第一个scracth网站，现在我面临一些挑战，让它看起来像我想要的。

基于Bootstrap，我将在Jumbotron内部发布帖子标题，以特色图片为背景。为了使其更加明显，我想放置一个叠加的虚线div，而不是将每个图像编辑得更暗以匹配我的帖子标题。

我几乎所有事情都取得了成功，但是我不能把标题放在点上面，所以它也被覆盖了。

<div id="capa" class="jumbotron text-center" style="background-image:url('PHP TAG FOR FEATURED IMAGE');">
<h1 class="titulo-post"><?php the_title(); ?></h1>
<p class="data-post"><?php echo ucfirst(get_the_time('l, j \d\e F \d\e Y')); ?></p>
<div id="dot-matrix"></div>

这是CSS：

.jumbotron {
    margin-top:-30px;
    padding: 100px 0;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}
#capa {
   background-size: 100% auto;
   border-radius: 6px;
   margin-top: -20px;
   position: relative;
}
#capa h1 {
   z-index: 9999;
}
#dot-matrix {
    background: url(http://www.the215guys.com/wp-content/themes/the215guys/images/graphics/pattern-1.png);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
}

有人帮帮我吗？提前谢谢！

Answer 1

要使用z-index，您必须明确将元素的位置设置为absolute，fixed或relative。

<div id="capa" class="jumbotron text-center" style="background-image:url('PHP TAG FOR FEATURED IMAGE');">
    <div id="dot-matrix"></div>
    <h1 class="titulo-post"><?php the_title(); ?></h1>
    <p class="data-post"><?php echo ucfirst(get_the_time('l, j \d\e F \d\e Y')); ?></p>
</div>

CSS：

.jumbotron {
    margin-top:-30px;
    padding: 100px 0;
    height: 300px;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}
#capa {
   background-size: 100% auto;
   border-radius: 6px;
   margin-top: -20px;
   position: relative;
}
#capa h1 {
    z-index: 0;
    position: absolute;
    left: 0;
    right: 0;
    color: white;
}
.data-post {
    position: absolute;
    left: 0;
    right: 0;
    top: 200px;
    color: white;
}
#dot-matrix {
    background: url(http://www.the215guys.com/wp-content/themes/the215guys/images/graphics/pattern-1.png);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

这是一个工作示例的小提琴： Fiddle

Answer 2

你的问题是'z-index'命令试试这个：

此处的工作示例：http://codepen.io/Tmeister/pen/qOEmVy

.jumbotron {
    margin-top:-30px;
    padding: 100px 0;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}
#capa {
    background-size: 100% auto;
    border-radius: 6px;
    margin-top: -20px;
    position: relative;
    z-index: 1
}
#capa h1 {
    z-index: 2;
    color: white;
    font-size: 5em;
}
#dot-matrix {
    background: url(http://www.the215guys.com/wp-content/themes/the215guys/images/graphics/pattern-1.png);
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
}

带有虚线叠加和帖子标题的超大屏幕

2 个答案: