具有JS React和Semantic-ui背景图像

Question

我正在尝试让我的页面显示文本和图标后面的图像。这是我目前所拥有的：

import React from 'react';
import SamplePicture from '../../images/sample-picture.jpg';

class Front extends React.Component {
    render() {
        return (
            <div className="ui segment">
                <img className="ui floated image" src={SamplePicture} />
                <p>
                    This is a front page that will have an image in the background 
                    <br />
                    Sampletext
                </p>
            </div>
        );
    }
}

export default Front;

它会显示图像，但文本会呈现在下面。基本上，我想要创建的文本渲染在图像的顶部。

第一次在这里问问题，所以可能有一些我应该分享的信息，但没有。不管怎样，严厉点，告诉我代码和问题有什么问题。

Answer 1

你可以使用flexbox来做类似这样的事情：

<div className="ui segment">
  <div className="ui medium image">
    <div
      className="ui active center"
      style={{
        display: 'flex',
        position: 'absolute',
        width: '100%',
        height: '100%',
        justifyContent: 'center',
        zIndex: 1,
      }}>
      <div className="content">Sampletext</div>
    </div>
    <img
      src="https://via.placeholder.com/410x210"
      className="ui floated image"
      alt="alt"
    />
  </div>
</div>

此解决方案使用flexbox将文本居中放置在图像上。

为了便于演示，我使用了via.placeholder.com作为图像源，但您可以将其更改为您的图像的src。

如果文本未精确居中，请将容器更改为较小的大小(例如，从中到小)或选择较大(较宽)的图像。