Как заставить изображение выдвинуть другое изображение в теге <marquee> - PullRequest
Новая
       11

Как заставить изображение выдвинуть другое изображение в теге <marquee>

0 голосов
/ 22 февраля 2019

Я только начинаю 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/

Ответы [ 3 ]

0 голосов
/ 22 февраля 2019

То, чего вы пытаетесь достичь, можно сделать, установив изображение «f & * k you» в качестве фона выделения и размера фона «cover».Вот так: 

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

Я обновил вашу скрипку https://jsfiddle.net/0vd79j2h/

0 голосов
/ 22 февраля 2019

<marquee> устарел

Настоятельно рекомендуется избегать <marquee> - он устарел и уже устарел.Мы все еще можем настроить элементы HTML так, чтобы они вели себя как <marquee> с CSS-анимацией (или даже с JavaScript / jQuery, хотя это не было бы так же эффективно, как с CSS).В следующей демонстрации используется только CSS-анимация, и на самом деле единственными изображениями являются шрифты (например, смайлики )

Демо 

.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>
0 голосов
/ 22 февраля 2019

Обновленное решение: 

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