Bootstrap如何在带有背景的图像上添加文本？
凤凰
我正在努力实现类似
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="background">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250" class="img-responsive">
</div>
<div class="bg-text">
<h2>testing</h2>
<h2>Text</h2>
</div>
</div>
</div>
我无法正确应用CSS，因此在小屏幕上也无法响应。
感谢您的帮助。
ab29007
html,body{
width:100%;
height:100%;
}
.bigger{
width:100%;
height:200px;
background-image:url('http://images.financialexpress.com/2015/12/Lead-image.jpg');
background-size:cover;
background-position:center;
position:relative;
}
.smaller{
width:100%;
height:50px;
background-color:rgba(0,0,0,0.6);
position:absolute;
bottom:0;
text-align:center;
color:white;
}<div class="bigger">
<div class="smaller">Text Here</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在 FFmpeg 中的视频上为带有文本大小的文本添加背景图像？
- 2
如何在另一个背景图像上获取带有文本的div
- 3
如何在图像上动态添加文本？
- 4
如何在中间绘制带有文本的圆圈和作为圆圈背景的图像？
- 5
如何识别带有彩色背景图像的文本？
- 6
如何创建背景图像并在其上添加文本
- 7
如何创建背景图像并在其上添加文本
- 8
Higcharts：当存在带有不同颜色的plotBand时，如何在图表上呈现背景文本？
- 9
带有文本和图像的Bootstrap 3面板（图像的背景不同）
- 10
如何在Bootstrap表单上放置背景图像？
- 11
如何在图像上添加带有文字的透明覆盖层？
- 12
如何在Flutter中在圆形图像上添加带有不透明层的图标
- 13
如何在带有图像的叠加布局上添加按钮
- 14
如何在背景图像上添加颜色叠加？
- 15
带有透明背景图像的文本
- 16
如何在Android中的画布文本上添加透明背景？
- 17
Bootstrap-如何在小型设备上使文本环绕图像？
- 18
如何在图像的选定区域上的文本上方添加鼠标？
- 19
如何在JavaScript中的图像上添加可拖动文本
- 20
如何在图像的选定区域上的文本上方添加鼠标？
- 21
如何在HTML上添加文本和图像作为链接
- 22
如何在Javascript按钮上添加文本+图像
- 23
如何制作带有中心垂直文本的全高图像，并与背景叠加图像左对齐
- 24
在 Html5 中，我如何在其下方添加带有文本的图像链接
- 25
从带有背景图像的浅色文本中提取文本
- 26
将带有背景图像的文本元素添加到div中会导致图像周围出现空白
- 27
如何制作带有图像背景的按钮？
- 28
带有Twitter Bootstrap的ActionLink上的图像
- 29
带有Twitter Bootstrap的ActionLink上的图像
我来说两句