React.Js 背景图像正确显示，顶部有文字

Question

我基本上是想复制这个网站作为自学 React 的课程。

http://www.milkbardigital.com.au/#home

有人可以帮我使用图片作为背景并将文本放在上面，还有，如何让它在页面上显示在相同的高度上？

这是我当前的代码

import React from 'react';
import {Image} from 'react-bootstrap';

export default React.createClass ( {
    render() {
        var background = {backgroundSize : 'cover'};
        return (
            <div style={{width: 'auto'}}>
                <Image style = {background} responsive src = "http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Home-Background.jpg">
                    This is a test
                </Image>
            </div>
        );
    }
});

非常感谢您的帮助！

Answer 1

您面临的问题是 Image 组件是一个 void 元素标签，不能接收子元素或危险的 SetInnerHTML 函数。

您将需要在 Image 组件之外使用 CSS 和文本（或 div）元素，如下所示：

var App = React.createClass ( {
    render() {
        var background = {backgroundSize : 'cover'};
        var textStyle = {
          position: 'absolute', 
          top: '50%', 
          left: '50%'
        };

        return (
            <div style={{width: 'auto'}}>
                <Image 
                  style={background} responsive 
                  src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Home-Background.jpg">
                </Image>
                <h1 style={textStyle}>Text over image</h1>
            </div>
        );
    }
});

这是一个示例演示：https://codesandbox.io/s/w1W8v3y8

希望对你有帮助！