css - 如何在相对宽度为 80% 的容器内的图像顶部放置文本

Question

我想在容器内的图像顶部放置文本，宽度为 80%
conainer.width 80% - 下面的代码不起作用
conainer.width 100% - 下面的代码
是我的brouser的工作屏幕截图

<style type="text/css">
.conainer {
    margin: auto;
    width: 80%; /* change that to 100% code will work */
    border: thin solid #000;
}
h2 { 
   position: absolute; 
   top: 200px; 
   left: 0; 
   width: 100%; 
}
.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

</style>

<div class="conainer">
    <div class="image">
        <img src="img/banners.jpg" width="100%" height="100%" />
        <h2>some text gos here</h2>
    </div>
</div>

Answer 1

您应该只设置 div 的背景，而不是尝试将h2放在img标签的顶部

Answer 2

这个对我有用。还有代码吗？

Answer 3

我认为最节省代码和兼容的方法是使用 CSS 将您的横幅图像定义为 div.image 的背景图像。

Answer 4

将您的h2样式替换为

h2 { 
   position: fixed;//yours is on top of image but absolutely positioned, so not visible
   top: 200px; 
   left: 0;  //Specify where you want to put your image with top and left properly now.
   width: 100%; 
}

Answer 5

行！我发现问题更改前 200 => 前 0

h2 { 
   position: absolute; 
   top: 0px; 
   left: 0; 
   width: 100%;