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" >
猎魂觉醒攻略<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();
});
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论