如何让一张图片在 <marquee> 标签内向上推另一张图片

Question

我刚刚开始 HTML 和一些基本的 CSS，我在这里试图用一些简单的标签让 Rocketship 推上另一张图片，

我什么都试过了。

我现在有，

<div align="center" >
<marquee behavior="scroll" direction="up">
<img class="ImageOne" src="images.png">
<img class="ImageTwo" src="falcon9-render.png">
</div>
</marquee>

我已经尝试了一些 CSS 现在在我的 stylesheet.css 中，这是代码。

image {
    position: relative;
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
.imageOne {
    z-index: 0;
}
.imageTwo {
    z-index: 1;
}

此时，我什至不知道我是否在正确的上下文中使用了 z-index。如果很难看到我的愿景，我基本上会尝试在它下面推和想象另一个图像。或者创建那种视觉效果，我不知道我是否必须编辑像素并将它们对齐。火箭似乎在中心，但 src="images.png" 在旁边，但在标签下...

对不起，如果这很愚蠢和简单，但我找不到任何东西。

根据评论要求； https://jsfiddle.net/7ohrpk42/

Answer 1

更新的解决方案：

img {
 margin-left: auto;
 margin-right: auto;
 display: block;
}

<DOCTYPE HTML!>
  <html>

  <body bgcolor=“#add8e6”>
    <title>The Most Best Worst Websites</title>
    <div align="center">
      <marquee behavior="scroll" direction="up">
        <img class="ImageOne" src="https://i.postimg.cc/g2ZJTkHk/images.png">
        <img class="ImageTwo" src="https://i.postimg.cc/mD5W47bx/falcon9-render.png">
      </marquee>
    </div>
  </body>

  </html>

如果没有 jsFiddle，你的问题有点不清楚，但我认为你正在尝试做这样的事情：

img {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.imageOne {
  margin: none;
}

.imageTwo {
  margin: none;
}

<div align="center">
  <marquee behavior="scroll" direction="up">
    <img class="ImageOne" src="https://place-hold.it/20x30">
    <br>
    <img class="ImageTwo" src="https://place-hold.it/20x30">
  </marquee>
</div>

Answer 2

您可以通过将 "f&*k you" 图像设置为选取框的背景并将背景大小设置为 'cover' 来实现您想要实现的目标。像这样：

marquee{
  background: url('https://i.postimg.cc/g2ZJTkHk/images.png') no-repeat;
  background-size: cover;
}

我更新了你的fiddlehttps://jsfiddle.net/0vd79j2h/

Answer 3

`<marquee>` is Deprecated

强烈建议避免使用 <marquee> -- 它已被弃用并且即将过时。我们仍然可以自定义 HTML 元素的行为并显示为带有 CSS animation (or even with JavaScript/jQuery although it wouldn't be as efficient as CSS). The following demo uses CSS animation only, and the only images are actually fonts (like emoticons)

的 <marquee>

演示

.marquee {
  width: 30%;
  height: 50vh;
  /* Required on Parent */
  overflow: hidden;
  font: 400 15vh/1.5 Consolas;
  background: rgba(0, 0, 0, 1);
  padding-left: 15px;
  margin: 20px auto;
}

.marquee b,
.marquee i {
  /* Required on Child*/
  white-space: nowrap;
  display: table-cell;
  vertical-align: baseline;
  /* Infinite Loops */
  animation: climb 2s linear infinite;
  animation-fill-mode: forwards;
  /* Set to 0s in order to have a point of reference */
  animation-delay: 0s;
}

.marquee i {
  animation: fall 2s linear infinite;
}


/* Required for complex CSS animation */


/* Bottom to top / Left to right */

@keyframes climb {
  0% {
    transform: translate(-200%, 300%);
  }
  100% {
    transform: translate(300%, -300%);
  }
}


/* Top to bottom / Right to left */

@keyframes fall {
  0% {
    transform: translate(200%, -20%);
  }
  100% {
    transform: translate(-300%, 300%);
  }
}

<header class='marquee fall'>
  <i></i><em>✨</em>
</header>

<header class='marquee climb'>
  <b></b><em></em>
</header>

如何让一张图片在 <marquee> 标签内向上推另一张图片

How do I make an image push up another image within a <marquee> tag

html

css

marquee

<marquee> is Deprecated

演示

`<marquee>` is Deprecated