Question

我正在尝试练习我的CSS，我一直在努力解决这个问题。

我正在尝试创建一个完整的背景图像进行演示，其中一些文本居中。但它（图像）并不覆盖整个屏幕，而是更大。

这就是我所拥有的：

我的App.js

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

export default class App extends Component {
  render() {
    return (
      <div>
        <div className="App-header">
          <img src={background} className="App-background-header"/>
          <div className="App-header-text">
            <p>This text should be center on the image above.</p>
          </div>
        </div>
        <div>
          <p>This is a sample text after the image...</p>
        </div>
      </div>
    );
  }
}

我的App.css

.App-header {
  height: 100%;
}

.App-background-header {
  height: 100%;

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.App-header-text {
  color: #444444;
  text-align: center;
}

我的目标基本上是做这样的事情： https://mdbootstrap.com/previews/docs/latest/html/navigation/intro-color.html

这就是我得到的：

- 编辑： -

我已经设法让它工作了，但我不确定做我做的事情是不是一个好习惯。

结果如下：

App.js：

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 className="App-divider"></div>
        <div>
          Just a random text here...
        </div>
      </div>
    );
  }
}

App.css：

.App-header {
  height: 100%;
  width: 100%;

  position: absolute;

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('./images/background.jpg');
}

.App-header-text {
  color: #aaaaaa;
  top: 50%;
  position: relative;
  text-align: center;
  font-size: 30px;
}

.App-divider {
  height: 100vh;
  width: 100%;
}

我不知道那里有“App-divider”是不是一个好主意。不过，它完成了这项工作。

Answer 1

您的图片在html中设置为img元素：<img src={background} className="App-background-header"/>而不是css背景，因此来自css的所有样式都不适用于该图片。

用你的css替换.App-background-header：

.App-background-header img {
  position: relative;
  width: 100%;
  height: auto;
} 

.App-header-text {
  position: absolute;
  top: 50%;
  left: 50%;
  with: 200px;
  height: 200px;
  margin-left: -100px;
  margin-top: -100px;
  text-align: center;
}

或者您可以将图像设置为背景：

.App-background-header img {
  width: 100%;
  height: auto;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("your_path_to_image.jpg");
}

但您必须从app.js <img src={background} className="App-background-header"/>

中删除此行

Answer 2

因为您使用了图像。您的图片必须是dev的样式。您可以使用css属性App-header

执行此操作

如何创建完整的背景图片

2 个答案: