Question

我想在图片上放置文字，如下图所示：

enter image description here

我写的HTML是：

<body>
<div class="image_holder">
    <img src="bg2.jpg" /> 
    <div class="overlay"> </div>
</div>

<div>NHS SUB</div>   
</body>

CSS：

    .image_holder {
    position:relative;
    float:left;
}

.overlay {
    position:absolute;
    top:0;
    background-color:rgba(34,70,118,0.7);
    width:100%;
    height:100%;
}

文本将自动跟在图像之后。如何将文字放在图像上？

Answer 1

试试这个

<div class="image_holder">
    <div class="overlay">NHS SUB</div>
</div>

风格

.image_holder{
  background:url('img.jpg');
}

另一种方式

<div class="image_holder">
    <img src="img.jpg"/>
    <div class="overlay">NHS SUB</div>
</div>

风格

.img_holder{
   position:relative;
}
.img_holder img{
   postion:absolute;
   z-index:-1;
}
.overlay{
   z-index:1;
}

Answer 2

你的div类看起来应该是ID。 ID是唯一的，因为类在多个元素中使用。

虽然你的嵌套div方法在应用正确的样式时会起作用，但更多的语义（和更少的标记）将使用Ben的方法 - 代码：

    <div class="mydiv" style="background-image:url('bg2.jpg');">overlay text here</div>
    <div>NHS SUB</div>

如何在图像上放置文字？

2 个答案: