html - 如何在图像顶部获取文本并停止调整图像大小？

Question

这是我的 JSFiddle:http://jsfiddle.net/uh2ptg23/1/

如果您展开“结果”框，您会看到每个彩色条应该内嵌地彼此相邻 float 。我的目标是将“Cranes”置于黄色之上，将“Erognomic Lifting”置于蓝色之上，将“Fall Protection”置于绿色之上。我遇到的另一个问题是，当调整窗口大小时，彩色条相互重叠。我不一定想要这个，我希望它们保持 100% 大小并且彼此远离并内联 float 。

HTML:

<div class="sections">
<div class="cranes">
<img src="http://i.imgur.com/79SghD7.jpg" id="craneButton">
<span id="craneText">Cranes</span>
</div>
<div class="ergonomicLifting">
<img src="http://i.imgur.com/3HLElPO.jpg" id="ergoButton">
<span id="ergoText">Ergonomic Lifting</span>
</div>
<div class="fallProtection">
<img src="http://i.imgur.com/IOb8O3I.jpg" id="fallButton">
 <span id="fallText">Fall Protection</span>
</div>
</div>

CSS:

.sections {
width: 75%;
text-align: center;
margin: 0 auto;
}

.cranes {
float: left;
width: 33%;
position: relative;
}

.ergonomicLifting {
float: left;
width: 33%;
position: relative;
}

.fallProtection {
float: left;
width: 33%;
position: relative;
}

#craneText {
position: absolute;
z-index: 1000;
}

#fallText {
z-index: 1000;
position: absolute;
}

#ergoText {
z-index: 1000;
position: absolute;
}

Answer 1

JSFiddle Demo

CSS

.sections {
    width: 75%;
    text-align: center;
    margin: 0 auto;
    overflow: hidden;
}

.sections div span {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.sections div {
    float: left;
    width:33%;
    position: relative;
}

.sections div img {
    max-width:100%;
}