Question

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

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

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

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

Answer 1

嗯，您必须使用该图像作为“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。

Answer 2

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

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

你如何在文本下方放置图像

2 个答案: