logo标签列表

在Bootstrap中为页眉设置全宽度背景图像

javascriptjqueryhtmlcsstwitter-bootstrap
4

我的问题是如何在Bootstrap中设置全屏宽高的头部背景图片，类似于 http://demo.evenfly.com/view?theme=SantaGo（我不期望有动画效果，我希望学习如何让背景图片适合屏幕大小）。

目前为止，我所做的是：

https://codepen.io/anon/pen/reYRBo

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;
}

最终，如果我拍摄整个页面的截屏，我期望的结果是这样的：

预期结果

1
类似这样的吗？http://www.bootply.com/108614 - Stuart
我认为以下 CSS 对您的要求已经足够了。您不需要编写其他 CSS。body{ margin:0; padding:0; } - Batman
@Stuart 是的，我之前尝试过，但图片不是响应式的 :/ - Kaw123
它被设置为覆盖，因此它将始终按比例缩放 :) - Stuart
5个回答
6

不需要使用额外的图片标签，只需设置背景和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>

2

您的 #jumboid 中是否有一个 img 标签？

如果没有，您可以通过在 #jumboid 上使用 background-image 轻松解决它。

按照以下方式编辑 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
1

使用contain可以使你的背景图片具有可扩展性和响应性-

background-size:contain;

或者如果想要一个固定的头部高度并希望保持图像背景缩放到头部宽度-

background-size:100% 100%;

0

嗨，试试这段代码，这是你要找的吗？

body {
  margin: 0;
  padding: 0;
  width: 100%;
}
#jumboid {
  width: 100%;
}
.bg-image {
  position: relative;
  background: url("http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg") no-repeat center center /cover;
  height: 450px;
  background-attachment: fixed;
}
.bg-image img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
header {
  width: 100%;
  height: 100%;
  height: calc(100% - 1px);
  background-image: url('a.jpg');
  background-size: cover;
}
<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">
      </div>

    </div>
  </header>
  <div class="restofthecontent">
    <p>your content</p>
  </div>





</body>

</html>

谢谢回复，但是在你的实现中也删除了图片的一半。 - Kaw123
0

通过CSS将图像放置在DIV的背景中，而不是在<img>标签中。

并为该DIV提供以下CSS。

.Your_DV {
 background-image: url(http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg);
background-position: fixed;
background-size: cover;
background-repeat: no-repeat;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接