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

时间 2019-12-06 标签 bootstrap 文字显示响应式图片

在这个位置折腾了一会，半天没有出效果。
有两种办法：1）让图片作为背景，文字直接布局在图片上；javascript
2）让图片用img标签插入，文字相对布局在图片上；css
先说说第一种办法的问题，要想让背景图片彻底显示出来，非得设置外层容器的高度，这样就失去了响应式；html
例如：java

#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 或一个固定值都达不到效果，要么图片显示不全，要么显示有多出来的白边；

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

作法以下：url

html结构：code

<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();
});

htm