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>

如何使用Semantic-UI-React <container>在标头中呈现背景图像

1 个答案: