Question

好吧所以问题很简单，我试图让这个系统我的文字将在我的图像上，但问题是我不能这样做，因为我的div是绝对的（因为我用它做了一些东西我不能将它改为亲戚，因为如果我这样做将是一次重大改革）

#box_1 {
    position: absolute;
}

#box_1 img {
    height: 100%;
    width: 100%;
    position: relative;
}

#box_1 h1 {
    position: absolute;
}

<div id="box_1" class="test_div"><img src="img/scripting.jpg" /><h1>Documentation</h1></div>

那么有什么建议吗？我必须将文本保留在图像顶部并将DIV保持在绝对位置

编辑：这里的例子 https://css-tricks.com/wp-content/csstricks-uploads/textoverimageexample.jpg

Answer 1

您可以使用z-index和文字position:absolute

＆＃13;

#box_1 {
    position: absolute;
}

#box_1 img {
    height: 100%;
    width: 100%;
    position: relative;
}

#box_1 h1 {
    position: absolute;
}
#text
{
    z-index:100;
    position:absolute;    
    color:black;
    font-size:24px;
    font-weight:bold;
    bottom: 0;
        left: 0;
        right: 0;
text-align:center;
}

＆＃13;

<div id="box_1" class="test_div"><img src="http://www.ew.com/sites/default/files/styles/tout_image_612x380/public/1455655770/homer.jpg?itok=TOtuVefM" /><h1>Documentation</h1>
 <p id="text">
        Hello World! Hello Galaxy !
    </p></div>

＆＃13;

在图像上保留文本的绝对div

1 个答案: