问题

I am just starting HTML and some basic CSS, Im here trying to make a Rocketship push up another image with some simple tags,

Ive tried everything.

I have right now,

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

I have tried some CSS which is in my stylesheet.css right now, and here is that code.

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

and at this point, i dont even know if im using z-index in the right context. If its hard to see my vision, Im bascially trying to push and image up with another image under it. or create that kind of visual, i dont know if i have to edit the pixel and align them up. The rocket seems to be being in the center but the src="images.png" is on the side but its under the tag...

Sorry if this is dumb and simple but I couldnt find anything.

As Requested in comments; https://jsfiddle.net/7ohrpk42/

回答1:

Updated Solution:

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>

Your questions a little unclear without a jsFiddle, but I think you are trying to do something like this:

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>

回答2:

What you're trying to achieve can be done by setting the "f&*k you" image as the background of the marquee and background size to 'cover'. Like this:

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

I updated your fiddle https://jsfiddle.net/0vd79j2h/

回答3:

<marquee> is Deprecated

It is strongly recommended that <marquee> be avoided -- it's deprecated and on its way to becoming obsolete. We can still customize HTML elements to behave and appear as a <marquee> with 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)

Demo

.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>

来源：https://stackoverflow.com/questions/54820851/how-do-i-make-an-image-push-up-another-image-within-a-marquee-tag

标签

html

css

marquee

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

问题

回答1:

回答2:

回答3:

<marquee> is Deprecated

Demo