如何使用响应式图像和动态文本叠加来制作DIV

Question

如何使此背景图像响应并让文字保留在图像上的特定位置（调整大小时）？

http://jsfiddle.net/webtiki/Dj7Hb/7/

HTML：

<div class="wrapper">
<img src="YOUR_IMAGE" />
<div class="content">
    <div>
        <div>
             blahblab
        </div>
    </div>
</div>
</div>

CSS：

.wrapper {
width:960px;
margin:0 auto;
position:relative;
}
.wrapper > img {
width:100%;
height:auto;
}
.content {
top:0;
position:absolute;
width:100%;
height:100%;
}
.content > div {
display:table;
width:100%;
height:100%;
}
.content > div > div {
display:table-cell;
vertical-align:middle;
text-align:center;
}

Answer 1

将背景更改为css中的背景图片，并在封面上使用大小覆盖而不是img标记。

background-image: url(your-img);
background-size: cover;
background-repeat: no-repeat;

希望这有帮助。