Question

我基本上试图复制这个网站作为自学React的一课。

https://developer.android.com/training/basics/intents/index.html

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

这是我当前的代码

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和text（或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背景图像正确显示顶部的单词

1 个答案: