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

Question

我正在使用Semantic-UI-React主题，并希望使用覆盖完整标题的不透明背景图像来自定义它。我会在那之上添加徽标和文字。我似乎无法在<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>