div的响应背景图像
我有以下HTML：
<body>
<div class="container">
<div class="page-header">
<div class="masthead">
<div class="header-image"></div>使用的是Bootstrap 3.3。我想设置一个标题图像，这将作为一个旗帜，并将作出尽可能多的响应。我设置了header-image类，并给了它以下属性：
.header-image {
background-image: url("../images/amazingimage.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center;
}但我根本看不见图像。请帮帮我，谢谢。
更新：这里是小提琴： http://jsfiddle.net/qnsnnf9s/
回答 3
Stack Overflow用户
发布于 2014-12-22 16:56:11
需要设置height和width。
我还建议您使用background-size: cover属性来缩放图像，并始终填充可用的空间。
将背景图像缩放到尽可能大的范围，使背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域内。
.header-image {
width: 100%;
height: 100px;
background-image: url("youreimage");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}在这里，更新的小提琴http://jsfiddle.net/qnsnnf9s/3/
Stack Overflow用户
发布于 2014-12-22 16:55:15
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;
}一般规则:使用高度时始终使用像素，在使用宽度时始终使用百分比。当您处理宽度(以像素为单位)时，无法正确和有效地构建响应。请评论您对上述问题的回答，我将编辑您需要更改/更新的任何内容。
Stack Overflow用户
发布于 2014-12-22 16:43:13
//CSS块
.header-image {
height: 500px; //RESPONSIVE USE (%,em, or vh/vw)
width: 500px; //RESPONSIVE USE (%,em, or vh/vw)
background: url("../images/amazingimage.png") no-repeat;
background-size: cover;
-webkit-background-size: cover;
background-position: center center;
-webkit-background-position: center center;
}https://stackoverflow.com/questions/27606754
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号