我有以下 HTML:
<body>
<div class="container">
<div class="page-header">
<div class="masthead">
<div class="header-image"></div>
正在使用 Bootstrap 3.3。
我想设置一个标题图像，它将用作横幅并尽可能响应。
我设置了 header-imageclass 并赋予了它以下属性:
.header-image {
background-image: url("../images/amazingimage.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
}
但是我根本看不到图像。 请帮助我，谢谢。
更新: 这是一个 fiddle :http://jsfiddle.net/qnsnnf9s/
最佳答案
http://jsfiddle.net/qnsnnf9s/1/
这里对您想要的稍作改动。您是否希望导航位于横幅图片内？
.header-image {
background-image: url("myimageURL");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
z-index: 99;
width: 100%;
height: 100px;
}
一般规则:在处理高度时始终使用像素，在使用宽度时始终使用百分比。当您使用以像素为单位的宽度时，您无法正确有效地构建响应。请评论您对上述问题的回答，我将使用您需要更改/更新的任何内容来编辑 jsfiddle。
关于html - div的响应式背景图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27606754/