html - 将 div 边框放在包含文本的前面(固定显示)

Question

这是我的:

但是，我希望文本下方的阴影不会出现在边框顶部。当标题的“位置”设置为“绝对”或“固定”以外的任何值时，我可以获得这种效果，但我在动画中失去了灵 active ……这是我稍后想要做的。

这是我的代码:

.feature {
height: 300px;
width: 100%;
background-image: url("http://conceptartworld.com/wp-content/uploads/2013/06/The_Last_of_Us_Concept_Art_Crows_JS-01.jpg");
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
border-bottom: solid 5px #FFFFFF;
box-shadow: 0 2px 10px #333;
}

.feature h1 {
position: fixed;
font-size: 120px;
vertical-align: text-bottom;
color: #FFFFFF;
margin-left: 50px;
font-family: "oswald", sans-serif;
font-weight: 400;
text-transform: uppercase;
text-shadow: 4px 4px 5px rgba(0,0,0,0.5);
transition: margin 0.5s;
}

#moral {
margin-top: 160px;
} 

#studios {
margin-top: 160px;
margin-left: 400px;
}

还有...我的垂直对齐文本底部不起作用...这就是我使用上边距的原因...谁能告诉我为什么？

阿曼

Answer 1

我觉得不把边框线做成一个独立的元素是做不出这个效果的。 将其实现为 <hr/>并将其设置为大于文本的 z-index。