html - 文本卡在 div 后面

Question

我的文本目前卡在背景稍微透明的 div 后面，似乎无法让它向前显示。

我试过改变“图像-文本”中的位置，但他们都把它发送到最后面。

    .top-container
    {
    
    	position: relative;
    	text-align: center;
    	color: white;
    }
    
    /*background image*/
    .desk
    {
    
    	width: 100%;
    	height: 100%;
    	filter: blur(5px);
    }
    
    
    .imagetext
    {
    
    	position: absolute;
    	bottom: 50%;
    	padding-left: 30%;
    	padding-right: 30%;	
    	margin-left: 15%;
    	translate: (-50%. -50%);
    	background-color: grey;
    	opacity: 0.3;
    	text-align: center;
    	border: 2px solid white;
    	color: white;
    }

    <div class="top-container">
    	<img src="images/desk.jpg" alt="Desk" class="desk">
    		<div class="imagetext">
    			<h2>text header</h2>
    			<p>sadfd hdsfsaf ssds</p>
    			<p>fhr fhswodd hwlfjhs w ds</p>
    		</div>
    </div>

Answer 1

正如 Architect 所说，您需要添加一个 z-index 值(请参阅下面的片段)

.top-container
{

    position: relative;
    text-align: center;
    color: white;
}

/*background image*/
.desk
{

    width: 100%;
    height: 100%;
    filter: blur(5px);
}


.imagetext
{

    position: absolute;
    bottom: 50%;
    padding-left: 30%;
    padding-right: 30%; 
    margin-left: 15%;
    translate: (-50%. -50%);
    background-color: grey;
    opacity: 0.3;
    text-align: center;
    border: 2px solid white;
    color: white;
    z-index:1; /* <<=======   Just add this */
}

<div class="top-container">
    <img src="http://placekitten.com/100/300" alt="Desk" class="desk">
    <div class="imagetext">
        <h2>text header</h2>
        <p>sadfd hdsfsaf ssds</p>
        <p>fhr fhswodd hwlfjhs w ds</p>
    </div>
</div>

但是，您真的应该阅读这些关于如何创建整页背景图像的文章:

https://css-tricks.com/perfect-full-page-background-image/

https://www.smashingmagazine.com/2009/03/backgrounds-in-web-design-examples-and-best-practices-2/