在这个位置折腾了一会,半天没有出效果。有两种办法: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();
});