Question

我目前正在制作一个网页（使用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%，但它只会使图像略大一些。我还想说宽度是正确的，我唯一的问题是让高度合适。

Answer 1

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/

Answer 2

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

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

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

body, h1{
  margin: 0;
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

如果您想要整页背景，请定位html。

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

Answer 4

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

以下是一些选项

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

Answer 5

当你想要制作完整的背景时，你的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％

Answer 6

只需将背景放在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

div背景不是全尺寸，只有文字大小

6 个答案: