`<marquee>` is Deprecated

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”来完成您要实现的目标。像这样：

s = select(['*',['b','c'],'d'], data)

work = lambda r: f"path: {r[0]}, value: {r[1]}"

for x in map(work, s):
  print(x)

# path: [2, 'b', 'd'], value: 100
# path: [3, 'c', 'd'], value: 300

我更新了您的小提琴https://jsfiddle.net/0vd79j2h/

Answer 3

`<marquee>` is Deprecated

强烈建议避免使用<marquee>，因为它已过时且已过时。我们仍然可以自定义HTML元素，使其表现出来并与CSS animation一起显示为<marquee>（甚至与JavaScript / jQuery一起显示，尽管效率不如CSS）。以下演示仅使用CSS动画，并且唯一的图像实际上是字体（例如emoticons）

演示

.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>标签中的另一张图片上推

3 个答案:

`<marquee>` is Deprecated

演示

如何制作图片，将<marquee>标签中的另一张图片上推

3 个答案:

<marquee> is Deprecated

演示

`<marquee>` is Deprecated