1
votes

Comment faire en sorte qu'une image pousse une autre image dans une balise

Je commence juste le HTML et quelques CSS basiques, j'essaye ici de faire monter une autre image avec un Rocketship avec quelques balises simples,

J'ai tout essayé.

J'ai en ce moment,

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

J'ai essayé du CSS qui se trouve dans ma feuille de style.css en ce moment, et voici ce code.

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

et à ce stade, je ne sais même pas si j'utilise z-index dans le bon contexte. S'il est difficile de voir ma vision, j'essaie essentiellement de pousser et de faire une image avec une autre image en dessous. ou créer ce genre de visuel, je ne sais pas si je dois éditer le pixel et les aligner. La fusée semble être au centre mais le src = "images.png" est sur le côté mais c'est sous le tag ...

Désolé si c'est stupide et simple mais je n'ai rien trouvé.

Comme demandé dans les commentaires; https://jsfiddle.net/7ohrpk42/

html css marquee

7 commentaires

Bienvenue sur Stackoverflow, veuillez créer un jsfiddle.net pour nous montrer ce que vous avez jusqu'à présent et également ajouter une image si vous pouvez de ce que vous voulez réaliser

JFYI, vos balises div et marquee se ferment dans un ordre incorrect. Et l'entrée CSS pour div image devrait probablement être img .

@Pixelomo le voici jsfiddle.net/7ohrpk42

Si je vous ai bien compris, je pense que vous devriez créer votre image en tant qu'élément de bloc car l'image est un élément en ligne jsfiddle.net/e79w612o

Oui, cela fonctionne comme la réponse des autres personnes, mais je ne comprends tout simplement pas pourquoi il ignore l'instruction align = "center" ...? comme tout à gauche @Vitorinofernandes

fondamentalement, un élément de bloc occupe toute la largeur, vous pouvez donc centrer un élément de bloc en donnant margin-left: auto et margin-right: auto text-align center ne fonctionnera que pour un élément inline ou inline-block jsfiddle.net/ e79w612o / 1

@AriaGhasemi vous devez donc aligner non pas le div mais les images au centre. le div est déjà aligné. plus encore, s'ils sont placés sous forme de blocs, ils hériteront de l'alignement.

3 Réponses :

1
votes

Solution mise à jour:

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

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

.imageOne {
  margin: none;
}

.imageTwo {
  margin: none;
}

Vos questions un peu floues sans jsFiddle, mais je pense que vous essayez de faire quelque chose comme ceci:

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

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

2 commentaires

voici un JsFiddle si ça aide maintenant, j'ai essayé le code mais il semble que tout soit collé à gauche, y a-t-il un moyen de le centrer? le div = "center" ne fonctionnait pas jsfiddle.net/7ohrpk42

Vérifiez la solution mise à jour. Et vous avez un langage / contenu fort ici.

0
votes

Ce que vous essayez d'accomplir peut être fait en définissant l'image "f & * k vous" comme arrière-plan du rectangle de sélection et la taille de l'arrière-plan sur "couvrir". Comme ceci:

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

J'ai mis à jour votre violon https://jsfiddle.net/0vd79j2h /

0 commentaires

0
votes

est Obsolète
Il est fortement recommandé d'éviter - il est obsolète et est en passe de devenir obsolète. Nous pouvons toujours personnaliser les éléments HTML pour qu'ils se comportent et apparaissent comme un avec animation CSS (ou même avec JavaScript / jQuery bien que ce ne soit pas aussi efficace que CSS). La démo suivante utilise uniquement l'animation CSS, et les seules images sont en fait des polices (comme émoticônes a>)

Démo

<header class='marquee fall'>
  <i>ðŸŒ </i><em>âœ¨</em>
</header>

<header class='marquee climb'>
  <b>ðŸš€</b><em>ðŸŒŒ</em>
</header>

.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%);
  }
}

2 commentaires

cela ne semble pas aussi efficace car il y a plus de code et je ne suis qu'un débutant et n'ai à peine aucune connaissance. J'essaierai également ce code. En tout cas merci :)

Bien sûr, il y a plus de code, il remplace le comportement d'un élément spécial qui sera obsolète. Avez-vous lu l'article sur le lien que j'ai fourni ou savez-vous ce que signifie obsolète ou obsolète? De plus, il y a plus de facteurs qui attribuent à l'efficacité que la simple quantité de code.