Wordpress 带有虚线覆盖和帖子标题的Jumbotron
我正在开发我的第一个用scracth制作的网站,现在我面临着一些挑战,要让它看起来像我想要的 基于Bootstrap,我将在Jumbotron中添加帖子标题,以特色图片为背景。为了使它更清晰可见,我想把一个覆盖的虚线div,而不是将每个图像编辑得更暗以匹配我的文章标题 我几乎在所有方面都取得了成功,但我不能把标题放在点滴之上,所以它也被覆盖了Wordpress 带有虚线覆盖和帖子标题的Jumbotron,wordpress,twitter-bootstrap,Wordpress,Twitter Bootstrap,我正在开发我的第一个用scracth制作的网站,现在我面临着一些挑战,要让它看起来像我想要的 基于Bootstrap,我将在Jumbotron中添加帖子标题,以特色图片为背景。为了使它更清晰可见,我想把一个覆盖的虚线div,而不是将每个图像编辑得更暗以匹配我的文章标题 我几乎在所有方面都取得了成功,但我不能把标题放在点滴之上,所以它也被覆盖了 <div id="capa" class="jumbotron text-center" style="background-image:url('
<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>
有人帮我吗?提前谢谢 为了使用
z-index
,必须明确地将元素的位置设置为绝对
、固定
或相对
<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>
下面是一个工作示例:
您的问题在于“z-索引”顺序,请尝试以下方法: 此处的工作示例:
“结束”是什么意思?3d结束了?还是仅仅在最高层?点阵绝对位于顶部:0,因此无法在2d方向上显示任何“覆盖”它的内容。效果非常好!格雷西亚斯·恩里克!
<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>
.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;
}
.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;
}