我开始使用 BootStrap 3 并尝试使用带有文本的背景图像。同时我希望它能够响应,但似乎我实现它的方式存在一些问题。我能够让它在普通桌面上运行,但是当我尝试在移动设备上模拟时,文本会超出背景图像。
http://jsfiddle.net/cn5guyt4/2/
<div id="front-landing">
<div class="container jumbotron hero-unit">
<h2 class="h1"><span>"Sample Test"</span></h2>
<h3 class="-sub-title">
<span>"Sample Test text 2"</span>
</h3>
</div>
</div>
.hero-unit {
position: relative;
margin-bottom: 0;
margin-top: 15px;
background: url('http://1.bp.blogspot.com/-P5uqUWLgZmA/UtQDdtahipI/AAAAAAAAF3E/IgvARwfxAlw/s1600/seamless-stone-background.jpg') 50% 80% no-repeat;
background-size: 100%;
min-height: 700px;
}
.h1 {
font-size: 2.625em;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 0.571em;
margin-top: 2em;
text-align: center;
}
.-sub-title {
font-weight: 400;
text-align: center;
}
h2 span {
background-color: white;
}
h3 span {
background-color: white;
}
有人可以帮我弄清楚我在这里做错了什么吗?
谢谢
最佳答案
在你的hero-unit class
中,background-size
设置为100%
但它应该是cover
相反。这产生了巨大的差异:see bootply .
我认为您真正想要做的是让 bootstrap 的超大屏幕有背景图片。为什么您的 jsfiddle 代码与您在此处发布的代码不同?有很大的差异。我的修复是使用上面的代码。
Working bootply
<div id="front-landing">
<div class="container jumbotron ">
<h2 class="h1"><span>"Sample Test"</span></h2>
<h3 class="-sub-title">
<span>"Sample Test text 2"</span>
</h3>
</div>
</div>
.h1 {
font-size: 2.625em;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 0.571em;
margin-top: 2em;
text-align: center;
}
.jumbotron{
background-image: url('http://1.bp.blogspot.com/-P5uqUWLgZmA/UtQDdtahipI/AAAAAAAAF3E/IgvARwfxAlw/s1600/seamless-stone-background.jpg');
background-size: cover;
}
.-sub-title {
font-weight: 400;
text-align: center;
}
h2 span {
background-color: white;
}
h3 span {
background-color: white;
}
关于html - 带有文本的 BootStrap 响应式背景图像不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30789197/