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

bootstrap 让文字显示在响应式图片上相关推荐

【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势...
A.优化站点资源速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
Bootstrap响应式图片
响应式图片 Bootstrap 3 中,通过为图片添加.img-responsive类,可以让图片支持响应式布局.其本质是为图片设置了max-width: 100%;.height: auto;和di ...
【CSS】响应式图片
原图:(宽1680px,高1050px) 可是,我们平时做网站的时候当<img src="***">中的图片大于可视窗口(viewport)时,就会出现横的滚动条.图片 ...
【转】CSS 与 HTML5 响应式图片
关于响应式的,近来国内外也不断提到,还是目前比较流行的技术话题,这篇文章来至淘宝UED的,讲得是响应式图片,写得很不错. 随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图 ...
继续送假期干货——响应式图片工具smartImg
中午看<众妙之门>看到一个响应式图片处理工具(点此查看)的介绍,然后就心血来潮想着不妨自己写一个基于JQ的吧,于是就又有了这么一个干货给大家. smartImg 的全部文件可以从我的Git ...
HTML5 响应式图片
现在上网设备越来越多,各种设备的屏幕千差万别,如果只用一张图片去涵盖所有的设备,一是可能会造成某些设备上显示效果不佳,比如使用了一张低清晰度的图,而网页运行在一个高清大屏里:二是可能会浪费带宽,比如使 ...
html中图片响应式怎么写,如何使用 HTML5 的picture元素处理响应式图片
图片在响应式网页设计中是出了名的最具挑战性的方面之一.今天我们就来看看如何使用元素来处理响应式图片. 让我们先了解一下问题固定宽度,像素完美的网站设计已经离我们远去了.在宽屏显示器,互联网电视,多尺 ...
CSS 与 HTML5 响应式图片
随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...
web响应式图片设计实现
随着移动开发热潮的兴起,已经有越来越多的公司将移动端的开发列为核心,其中不论是webapp还是手机页面都是如此,在开发的过程中就涉及到了一个web响应式图片的问题,这里我们就来探讨一下响应式图片的实现 ...

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

bootstrap 让文字显示在响应式图片上相关推荐

最新文章

热门文章