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

Question

我基本上是在尝试复制这个网站作为自学 React 的类(class)。

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 组件是一个空元素标签，无法接收子元素或危险的 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

希望对您有所帮助!