如何创建全屏背景图？React实现疑问及方案探讨

嘿，很高兴你已经搞定了效果！先帮你梳理下最初代码的问题，再聊聊你的解决方案，最后给你个更简洁的最佳实践方案～

• 你一开始用<img>标签实现背景图，但img是替换元素，设置height:100%时会维持自身宽高比，导致图片超出容器；而且background-position、background-size这些属性是给CSS背景图用的，对<img>标签完全无效，这就是图片过大且没覆盖全屏的核心原因。
• 另外.App-header的height:100%需要父元素（比如body、html）有明确的高度值才会生效，否则它会塌陷成内容高度，这也是背景图没撑满全屏的一个因素。

改成用CSS背景图是完全正确的方向！不过你加的App-divider确实不是最优解——它靠100vh的高度占位，本质是因为你给.App-header加了position:absolute，脱离了文档流，导致后面的内容跑到了背景图下面，所以需要额外的div来占位。其实可以通过调整定位方式，完全去掉这个多余的div。

直接用min-height:100vh让.App-header自然占满视口高度，再用Flex布局轻松居中文字，结构更简洁，也符合现代CSS规范：

修改后的App.js（无需额外div） #

import React, { Component } from 'react';
import './App.css';

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="App-header">
          <div className="App-header-text">
            <p>This text should be center on the image above.</p>
          </div>
        </div>
        <div>
          Just a random text here...
        </div>
      </div>
    );
  }
}

修改后的App.css #

/* 重置html和body的默认边距，确保全屏无留白 */
html, body {
  margin: 0;
  padding: 0;
}

.App-header {
  min-height: 100vh; /* 确保容器至少占满整个视口高度 */
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('./images/background.jpg');
  /* 用Flex布局一键居中文字，比相对定位更直观 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.App-header-text {
  color: #aaaaaa;
  font-size: 30px;
  text-align: center;
}

为什么这个方案更好？ #

1. 结构更简洁：去掉了多余的App-divider，.App-header靠min-height:100vh自然占据视口高度，后面的内容会自动排在它下方，不需要额外占位。
2. 居中更可靠：Flex布局是现代CSS中实现居中的最优方式，比top:50%+相对定位的写法更直观，也不会出现文字偏移的问题。
3. 兼容性更好：vh单位和Flex布局在现代浏览器中都有很好的支持，完全能满足需求。

内容的提问来源于stack exchange，提问作者RottenCheese