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

希望对您有所帮助！

React.Js 背景图片正确显示，文字位于顶部

React.Js Background Image properly displayed with words over the top

javascript

css

singlepage

reactjs

react-bootstrap