叠加多个图像

Question

我想创建一个 形象物.

最后的照片应该是什么样子的

有单图和 两个 "齿轮 "图像.

你问我为什么要拆分它们？我想实现一个滚动功能，当向下滚动页面时，它可以转动图像的齿轮。

后来我想让这个图像对象 居高临下. 这就是为什么我选择 相对位置. 因为齿轮总是要与文本保持相对。

我已经得到了这个功能，但不知为何 我有问题的图像堆叠到彼此的问题.

这就是目前的样子。

当前状态

function rotate(e) {
  e.preventDefault();

  rot += e.deltaY * 0.5;
  leftGear.style.transform = `rotate(${rot}deg)`;
  rightGear.style.transform = `rotate(${rot}deg)`;
}


let rot = 0;
const leftGear = document.querySelector(".leftGear");
document.body.onwheel = leftGear.onwheel = rotate;
const rightGear = document.querySelector(".rightGear");
document.body.onwheel = rightGear.onwheel = rotate;

/* To make white images become visible */
body { background: #161924 }

.nav-logo {
  width: 40px;
  height: 40px;
}

.rightGear {
  position: relative;
  z-index: 2;
}

.leftGear {
  position: relative;
  z-index: 2;
}

.leftGear img {
  display: block;
}

.rightGear img {
  display: block;
}

<div class="nav-logo" style="display: block">
  <img src="https://i.stack.imgur.com/vSCDm.png" height="60">
  <div class="rightGear" id="rightgear">
    <img src="https://i.stack.imgur.com/6541L.png" height="40">
  </div>
  <div class="leftGear" id="leftgear">
    <img src="https://i.stack.imgur.com/6541L.png" height="40">
  </div>
</div>

gearText.png (它有一些蓝色的背景，所以它不会重叠错误的部分)

齿轮.png

Answer 1

你可以在这里玩绝对位置和Z-index。

body {
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.nav-logo {
  position:relative;
}
.rightGear {
  position: absolute;
    top: 12px;
    left: 3px;
    z-index: -1;
}
.leftGear {
      position: absolute;
    bottom: 6px;
    right: 5px;
    z-index: -1;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="nav-logo" style="display: block">
      <img src="https://i.stack.imgur.com/vSCDm.png" height="60">
      <div class="rightGear" id="rightgear">
        <img src="https://i.stack.imgur.com/6541L.png" height="30">
      </div>
      <div class="leftGear" id="leftgear">
        <img src="https://i.stack.imgur.com/6541L.png" height="30">
      </div>
  </div>
</body>
</html>

Answer 2

你需要把第一个图片包进另一个div中，然后让你所有的位置都是绝对的。下面是一个例子

.nav-logo {
  width: 40px;
  height: 40px;
}
.rightGear {
  position: absolute;
  z-index: 2;
}
.leftGear {
  position: absolute;
  z-index: 2;
}
.leftGear img {
  display: block;
}
.rightGear img {
  display: block;
}

.main{
  position: absolute;
}

<div class="nav-logo" style="display: block">
      <div class="main">
      <img src="https://www.w3schools.com/html/pic_trulli.jpg" height="60">
       </div>
      <div class="rightGear" id="rightgear">
        <img src="https://www.w3schools.com/html/pic_trulli.jpg" height="40">
      </div>
      <div class="leftGear" id="leftgear">
        <img src="https://www.w3schools.com/html/pic_trulli.jpg" height="40">
      </div>
  </div>

Answer 3

根据你的需要，用位置属性移动那些齿轮就可以了。另外齿轮在主标志的下方，所以它们的z-index应该比主标志低。

同时将每个齿轮的高度从40改为30。

body {
  background: #161924
}

.nav-logo {
  width: 40px;
  height: 40px;
}

.rightGear {
  position: relative;
  top: -52px;
  left: 3px;
  z-index: -2;
}

.leftGear {
  position: relative;
  top: -69px;
  left: 27px;
  z-index: -2;
}

.leftGear img {
  display: block;
}

.rightGear img {
  display: block;
}

<div class="nav-logo" style="display: block">
  <img src="https://i.stack.imgur.com/vSCDm.png" height="60">
  <div class="rightGear" id="rightgear">
    <img src="https://i.stack.imgur.com/6541L.png" height="30">
  </div>
  <div class="leftGear" id="leftgear">
    <img src="https://i.stack.imgur.com/6541L.png" height="30">
  </div>
</div>

叠加多个图像

问题描述投票：0回答：1

1个回答

最新问题

叠加多个图像

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1