将PNG图像放在背景图像上

Question

我试图复制http://www.milkbardigital.com.au/作为学习项目的反应。

目前，我正在努力将PNG图像放在背景图像的顶部。

这是我的代码，

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

export default 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}>Agile Media Content</h1>

            </div>
        );
    }
});



<Image src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Digital-Media.png" responsive/>

这＆＃34; Image src＆＃34;我已经尝试将其置于上述代码中，但它无法正常工作。

任何人都可以解决这个问题吗？

使用React Bootstrap！

谢谢，

编辑 - - -

我已经研究过如何将它略微放在首位，现在试图把它放在正确的位置。

这是代码，忽略不透明度部分，

/ **  *由Hewlbern于17日 - 1月17日创建。  * /

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

export default React.createClass ( {
    render() {
        var background = {backgroundSize : 'cover',
        opacity: '0.5',
        };
        var textStyle = {
            position: 'absolute',
            top: '50%',
            left: '50%'
        };
        var ontop = {
            display: 'block',
            margin: 'auto',
            width: '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}>Agile Media Content</h1>
                <Image style={textStyle} responsive src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Digital-Media.png" />
            </div>
        );
    }
});