reactjs - 如何使用 Semantic-UI-React 在标题中渲染背景图像

Question

我正在使用 Semantic-UI-React 主题，并希望使用覆盖整个标题的不透明背景图像对其进行自定义。然后我会在上面添加一个 Logo 和文字。我似乎无法获取 <Header> 中的图像属性在职的。我尝试过很多组合。

这是我的 <Container>和<Header>代码 React :

  <Container>
  <Header
      as='h1'
      inverted
      style={{
        backgroundImage: `url(${"images/image_03-1024x320.jpg"})`,
        backgroundSize: 'cover',
        fontSize: mobile ? '2em' : '4em',
        fontWeight: 'normal',
        marginBottom: 0,
        marginTop: mobile ? '1.5em' : '3em',
      }}
      />
  </Container>
)

结果是 Header 中图像的一小部分.

Answer 1

如果没有工作示例来检查，很难确定，但我怀疑您需要添加宽度和高度。此外，您可能需要使 h1 显示 inline-block。试试这个:

<Container>
    <Header
        as='h1'
        inverted
        style={{
            width: 1024,
            height: 320,
            display: 'inline-block',
            opacity: 0.5,
            backgroundImage: `url(${"images/image_03-1024x320.jpg"})`,
            backgroundSize: 'cover',
            fontSize: mobile ? '2em' : '4em',
            fontWeight: 'normal',
            marginBottom: 0,
            marginTop: mobile ? '1.5em' : '3em',
        }}
    >
       Hello World
    </Header>
</Container>