div背景不是全尺寸，只有文本大小[重复]答案

【问题标题】：div background not full size, only size of text [duplicate]div背景不是全尺寸，只有文本大小[重复]
【发布时间】：2017-10-23 12:41:56
【问题描述】：

我目前正在制作一个网页（使用react.js）并且我正在尝试实现一个背景。我希望背景是全尺寸，但它只是 div 内文本的大小。这是我目前正在使用的代码： app.js

<div className="header">
    <h1 className="title">blah blah blah</h1>
    <h4 className="greeting">blah blah blah</h4>
</div>

app.css

.header {
    background: url("./blah.png");
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    outline: 0;
    display: block;
    text-align: center;
    color: lemonchiffon;
    height: 100%;
}

我尝试将height 调整为100%，但它只会使图像稍微变大。我还想说宽度是正确的，我唯一的问题是让高度合适。

【问题讨论】：

尝试：背景尺寸：自动，自动；或背景尺寸：包含；
这是因为您使用了background-size:cover - 这意味着背景将被调整为足够大以“覆盖”该区域。当你给你的标题一个高度时，你是否也给了 html 和 body（以及任何其他祖先）一个高度
全尺寸是什么意思？ div 高度是文本的高度。你想要它的高度是多少？
className="header" 是这个反应的东西还是应该是class="header"
@tech_Love 似乎没有太大的不同。

标签： javascript html css reactjs background-image

【解决方案1】：

使用 100vh 作为视口（屏幕高度的 100%）

参考号：https://www.w3schools.com/css/css_rwd_viewport.asp

使用以下方法从 body 和 h1 中删除默认边距。

body, h1{
  margin: 0;
}

.header {
  background: url("http://placehold.it/1920x1080");
  position: relative;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  outline: 0;
  display: block;
  text-align: center;
  color: lemonchiffon;
  height: 100vh;
  margin: 0;
}

body, h1{
  margin: 0;
}

<div class="header">
  <h1 className="title">blah blah blah</h1>
  <h4 className="greeting">blah blah blah</h4>
</div>

【讨论】：

这有帮助，但是图像现在太宽了，只显示了图像垂直的 20%。
@JakeOrben 好的更新
这似乎奏效了！

【解决方案2】：

只要把背景放在body上：

.background {
  background: url("http://images.all-free-download.com/images/graphiclarge/black_texture_texture_background_06_hd_pictures_169901.jpg");
}

.header {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    outline: 0;
    display: block;
    text-align: center;
    color: lemonchiffon;
    height: 100%;
}

  <body class = "background">
    <div class="header">
      <h1 class="title">blah blah blah</h1>
      <h4 class="greeting">blah blah blah</h4>
    </div>
  </body>

https://plnkr.co/edit/DDmWdwViw8aKI36EwOKM?p=preview

【讨论】：

【解决方案3】：

当你想要全背景时，你的 div 也应该是全高因为height:100%相对于父母的身高，你应该也让父母成为height:100% 一种选择是您可以使用

body{
    background: url("./blah.png");
    position: relative;
    background-size: cover;
    background-position: center center; //added line
    background-repeat: no-repeat;
    outline: 0;
    display: block;
    text-align: center;
    color: lemonchiffon;
    min-height: 100%;
}
html{
    min-height:100%;
}

将您的 html 标记和您的身体至少拉伸到 100% 的高度。如果您只想将特定元素设为 100% 高度，我建议您使用 height: 100vh;，这会使 div 相对于客户端屏幕 100%

【讨论】：

【解决方案4】：

如果您想要一个完整的页面背景，请定位 html。

html {
    background: url("./blah.png");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

【讨论】：

.html 是一个css选择器一个类，我认为你的意思是html
是的，谢谢@PatrickSampaio

【解决方案5】：

不能这样，元素不能动态调整为背景大小。

这里有一些选项

插入带有<img>-tag 的图像，用position: absolute 将h1 和h4 放在它上面
手动调整标题到图片高度：height: 300px
让图片缩小到div大小：background-size: contain

【讨论】：

【解决方案6】：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background: url("./blah.png");
}

参考：https://css-tricks.com/perfect-full-page-background-image/

【讨论】：

这会将背景放置在整个页面上，而不仅仅是所需的div。