分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何在页面中心放置 3 层元素（图像、图像、文本）？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何在页面中心放置 3 层元素（图像、图像、文本）？？

开发过程中遇到如何在页面中心放置 3 层元素（图像、图像、文本）？的问题如何解决？下面主要结合日常开发的经验，给出你关于如何在页面中心放置 3 层元素（图像、图像、文本）？的解决方法建议，希望对你解决如何在页面中心放置 3 层元素（图像、图像、文本）？有所启发或帮助；

所以我想要实现的是构建一个 HTML 页面，它有一个背景和前景，从光标的相反方向移动，而文本跟随光标。解释起来很复杂，但这是我在沙箱中的进展：https://codesandbox.io/s/broken-wildflower-0xzr3

文本一开始居中，但一旦出现光标，它就会突然对齐到左上角。

此外，我正在努力使其具有移动响应性。然而，在移动视图中，前景看起来非常小，并且由于字体的大小，页面可以横向移动。

我该怎么做才能解决这些问题？

<!DOCTYPE HTML>
<HTML lang="en">
  <head>
    <Meta charset="UTF-8" />
    <Meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <Meta name="vIEwport" content="wIDth=device-wIDth,initial-scale=1.0" />
    <link
      href="https://Fonts.GoogleAPIs.com/CSS?family=Roboto"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/CSS/bootstrap.min.CSS"
      integrity="sha384-BVYIISIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <title>latest</title>

    <style type="text/CSS">
      body {
        margin: 0;
        padding: 0;
      }

      #BACkground {
        height: 100vh;
        BACkground: url(https://wallpapercave.com/wp/12oNQS9.jpg);
        overflow: hIDden;
        BACkground-repeat: no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      #foreground {
        position: relative;
        wIDth: 30%;
      }

      #text {
        Font-family: Roboto !important;
        Font-size: 300%;
        color: rgb(0,0);
        filter: invert(1) grayscale(2) contrast(9);
        mix-blend-mode: difference;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
      }
    </style>
  </head>

  <body>
    <section ID="BACkground">
      <img
        ID="foreground"
        src="data:image/jpg;base64,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"
      />
      <h2 ID="text">THIS IS MY TEXT</h2>
    </section>

    <script>
      const BACkgroundEl = document.getElementByID("BACkground");
      const foregroundEl = document.getElementByID("foreground");
      const textEl = document.getElementByID("text");

      BACkgroundEl.addEventListener("mousemove",(E) => {
        const moveBACkgroundX = (e.pageX * -1) / 40;
        const moveBACkgroundY = (e.pageY * -1) / 40;

        const moveForegroundX = (e.pageX * -1) / 10;
        const moveForegroundY = (e.pageY * -1) / 10;

        const movetextx = (e.pageX * 1) / 10;
        const movetextY = (e.pageY * 1) / 10;

        BACkgroundEl.style.BACkgroundposition =
          moveBACkgroundX + "px " + moveBACkgroundY + "px";
        foregroundEl.style.left = moveForegroundX + "px ";
        foregroundEl.style.top = moveForegroundY + "px ";
        textEl.style.left = movetextx + "px ";
        textEl.style.top = movetextY + "px ";
      });
    </script>
  </body>
</HTML>