如何使图像推动另一个图像 标签 已弃用

问题描述 投票:1回答:3

我刚刚开始使用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>

我已经尝试了一些现在在stylesheet.css中的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/

html css marquee
3个回答
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>

0
投票

您要尝试实现的目标可以通过将“f&* k you”图像设置为选框和背景大小的背景来“覆盖”。像这样:

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

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


0
投票

<marquee> is Deprecated

强烈建议避免使用<marquee> - 它已被弃用并且正在逐渐过时。我们仍然可以自定义HTML元素来表现并使用<marquee>(或者甚至使用JavaScript / jQuery)显示为CSS animation,尽管它不如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>
© www.soinside.com 2019 - 2024. All rights reserved.