bootstrap 让文字显示在响应式图片上

在这个位置折腾了一会，半天没有出效果。

有两种办法：1）让图片做为背景，文字直接布局在图片上；

2）让图片用img标签插入，文字相对布局在图片上；

先说说第一种办法的问题，要想让背景图片完全显示出来，非得设置外层容器的高度，这样就失去了响应式；

例如：

#content-sec3 {    position: relative;    max-width: 100%;    height: auto;    background: url('../images/homepage/accssorybg.jpg') no-repeat top center;    background-size: 100% auto;    background-color: cadetblue;    text-align: center;}

高度设置auto 或一个固定值都达不到效果，要么图片显示不全，要么显示有多出来的白边；

最后是用第二中方式实现的，但也有不完美的地方，文本的水平居中成了问题，折腾了半天用脚本解决了，如有更好办法的朋友，希望指教。

做法如下：

html结构：

<div id="content-sec3">            <img class="img-responsive" src="resources/images/homepage/accssorybg.jpg" />            <div id="content-sec3-adjust" style="position: absolute; top: 0; left: 50%;">                <h2 class="title">Vpanel配件 </h2>                <p class="title-sub-line hidden-sm hidden-xs"> Vpanel ACCESSORIES </p>                <p class="title-more">查看更多 <img src="resources/images/homepage/right.png" /> </p>            </div>        </div>

css 样式：

#content-sec3 {    position: relative;    max-width: 100%;    height: auto;        background-size: 100% auto;       text-align: center;}    #content-sec3 .title {        margin-top:5px;        font-family: 微软雅黑;        font-size: 20px;        color: #333333;    }    #content-sec3 .title-sub-line {        margin-top:15px;        margin-bottom: 18px;        font-family: 微软雅黑;        font-size: 12px;        color: #CCCCCC;        text-align: center;    }    #content-sec3 .title-more {        margin-bottom: 10px;        font-family: 微软雅黑;        font-size: 12px;        color: #2E84E9;        text-align: center;        cursor:pointer;    }

 水平居中脚本：

 var init = function () {            var _bg3width = $("#content-sec3-adjust").width();            $("#content-sec3-adjust").css("margin-left", _bg3width * -1 / 2 + "px");        };

当window 窗口化改变大小时重新调用上面的脚本就可以了，

   $(window).resize(function () {
            init();
        });