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值（请参见下面的Snippit）

.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/

文字停留在div后面

1 个答案: