新手上路，请多包涵

我的问题是如何在 Bootstrap 中为页眉设置完整的宽度和高度背景图像，如 http://demo.evenfly.com/view?theme=SantaGo （我不期待动画，我期待如何制作适合屏幕的背景）？

这是我到目前为止所做的，

HTML:

 <html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="sltac.css">
  </head>
<body>
<header>
<div class="row">
<div class="bg-image" id="jumboid">
<img src="http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg" class="img-responsive" alt="Cinque Terre" width="100%" height="40%" back>
</div>
</header>
</body>
</html>

CSS：

 body{
    margin:0;
    padding:0;
    width:100%;
}

#jumboid{
    width:100% ;

}

.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
    max-width: 1200px; /* corresponds to max height of 450px */
    margin: 0 auto;

}

header{
     width:100%;
  height:100%;
  height:calc(100% - 1px);
  background-image:url('a.jpg');
  background-size:cover;
}

最后我期待这样的结果（如果我拍摄整页屏幕截图），

预期结果

原文由 Kaw123 发布，翻译遵循 CC BY-SA 4.0 许可协议

javascript jquery html css bootstrap

阅读 382

2 个回答

得票最新

社区维基

发布于
2022-12-12

✓ 已被采纳

无需使用额外的图像标签。只需设置背景和属性 background-size: cover

像这样尝试：

 html,
body {
  width: 100%;
  height: 100%;
}
header {
  width: 100%;
  height: 100%;
  background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg) center center no-repeat;
  background-size: cover;
}

 <body>

  <header>

  </header>
</body>

原文由 Marco Klein 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基

发布于
2022-12-12

img 中是否有 #jumboid 标签？

如果您不这样做，您可以在 background-image 上使用 #jumboid 轻松修复它。

编辑 css 如下：

 #jumboid{
    width:100% ;
    height: 100vh;
    background: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

（分叉）示例：https: //codepen.io/pimskie/pen/wGPOar

原文由 Pimmol 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

在 Bootstrap 中为标题设置全宽背景图像

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

如何实现类似豆包的AI改写框跟随内容滚动效果？

Stack Overflow 翻译