如何将图像置于文本下方答案

【问题标题】：How do you position image below text如何将图像置于文本下方
【发布时间】：2021-07-31 15:41:33
【问题描述】：

所以这就是我想要达到的目标：

如您所见，在标题下方有一个粒子图像，右上角和左下角各有一个半方形图像。现在我试图将粒子定位在标题下方的中间。

这是我的代码沙箱：https://codesandbox.io/s/nextjs-forked-xxn8g?file=/index.js

如何/最好的做法是什么？谢谢你的时间

【问题讨论】：

标签： html css reactjs next.js styled-components

【解决方案1】：

你好，我认为你需要这样的东西：

import React from "react";
import { render } from "react-dom";
import Head from "next/head";
const App = () => (
  <div>
    <Head>
      <title>Trying out next.js</title>
    </Head>
    <div className="container">
      <div className="wrapper">
        <div className="innerwrapper">
          <img
            src="https://rembux.vercel.app/_next/image?url=%2Fimages%2Fpretitle-image.png&w=96&q=75"
            className="title-image"
          />
          <h1 className="title">What They Said</h1>
        </div>
      </div>
    </div>
    <style jsx>{`
      .container {
        width: 100vw;
        height: 100vh;
        background-color: #fcf7f9;
      }
      .wrapper {
        max-width: 1440px;
        margin: auto;
      }
      .innerwrapper {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // padding: 2rem;
      }
      .title {
        font-weight: 800;
        font-size: 2rem;
        color: #00163a;
        text-align: center;
        z-index: 1;
      }
      .title-image {
        max-width: 72px;
        min-height: 50px;
        max-height: 50px;
        min-width: 72px;
        inset: 0 17rem 0 0;
      }
    `}</style>
  </div>
);

render(<App />, document.getElementById("root"));

【讨论】：

感谢您的回答，但看起来不像我想要的图片
this h1 ->
What they Say
必须是 div 和详细信息...

【解决方案2】：

嗯，你得用那张图片作为“innerwrapper”的背景：

<div className="container">
  <div className="wrapper">
    <div className="innerwrapper">
      <h1 className="title">What They Said</h1>
    </div>
  </div>
</div>

并修改它的css：

.innerwrapper {
    padding: 5rem;
    background-image: url("https://rembux.vercel.app/_next/image?url=%2Fimages%2Fpretitle-image.png&w=96&q=75");
    background-repeat: no-repeat;
    background-position: left 30% top 15%;
  }

如果您想将图像保留在<img> 标签中，唯一的办法就是在其css 属性中使用z-index。

【讨论】：

它是否适用于拐角处的半圆？所以我需要将它们导出为一张图像，然后将其用作我的背景？
是的，你可以使用那个圆点背景。为“容器” div 应用类似的 css 样式。

What they Say