Html 如何将图像定位在文本下方_Html_Css_Reactjs_Next.js_Styled Components

Html 如何将图像定位在文本下方

html css reactjs next.js

Html 如何将图像定位在文本下方,html,css,reactjs,next.js,styled-components,Html,Css,Reactjs,Next.js,Styled Components,这就是我想要实现的目标：如您所见，标题下方有一个粒子图像，右上角和左下角各有一个半方形图像。现在，我正在尝试将粒子放置在标题下方的中间位置这是我的代码沙盒：如何/最佳实践是什么？感谢您抽出时间嗯，您必须使用该图像作为“innerwrapper”的背景：如果您想将图像保留在标记中，唯一的方法就是在其css属性中使用z-index。嗨，我想您需要这样的东西： import React from "react"; import { render } from "

这就是我想要实现的目标：

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

这是我的代码沙盒：

如何/最佳实践是什么？感谢您抽出时间

嗯，您必须使用该图像作为“innerwrapper”的背景：

如果您想将图像保留在

标记中，唯一的方法就是在其css属性中使用

z-index

。

嗨，我想您需要这样的东西：

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"));

从“React”导入React；
从“react dom”导入{render}；
从“下一个/Head”导入Head；
常量应用=（）=>(
试用next.js
他们所说的
{`
.集装箱{
宽度：100vw；
高度：100vh；
背景色：#fcf7f9；
}
.包装纸{
最大宽度：1440px；
保证金：自动；
}
.innerwrapper{
最小高度：100vh；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
//填充：2rem；
}
.头衔{
字号：800；
字号：2rem；
颜色：#00163a；
文本对齐：居中；
z指数：1；
}
.标题图像{
最大宽度：72px；
最小高度：50px；
最大高度：50px；
最小宽度：72px；
插图：0 17雷姆0；
}
`}
);
render（，document.getElementById（“根”））；

它是否适用于拐角处的半圆？所以我需要将它们导出为一个图像，然后将其用作我的背景？是的，你可以使用那个圆点背景。为“container”div应用类似的css样式。谢谢你的回答，但它看起来不像我想要的图片中的样式这h1->他们说的必须是一个div和详细信息。。。

.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%;
  }

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"));