Superposer deux background ? [CSS]

Superposer deux background ? [CSS] - HTML/CSS - Programmation

Marsh Posté le 17-12-2022 à 20:22:15    

Bonjour, j'ai un problème en CSS que je n'arrive pas à résoudre. Je souhaiterais faire passer une bande orange derrière l'image et le texte tout en restant dans mon article.

Code :
  1. <article>
  2.   <header><h1>Ichigo Kurosaki</h1></header>
  3.   <hr>
  4.   <img class="cote" src="image/ichigo.png" height="300" alt="image de personnage">
  5.     <p> Thalassius vero ea tempestate praefectus praetorio praesens ipse quoque adrogantis ingenii,
  6.       considerans incitationem eius ad multorum augeri discrimina, non maturitate vel consiliis mitigabat,
  7.       ut aliquotiens celsae potestates iras principum molliverunt, sed adversando iurgandoque cum parum
  8.       congrueret, eum ad rabiem potius evibrabat, Augustum actus eius exaggerando creberrime docens, idque,</p>
  9. </article>


Voici une partie de mon html et le css qui touche à ce problème donne

Code :
  1. article{
  2.     background-color: #0d1a28;
  3.     margin: 3em 3em 4em;
  4.     padding: 0 0 1em;
  5.     overflow: hidden;
  6. }
  7. article p{
  8.     color: white;
  9.     padding: 20px;
  10. }
  11. article #php{
  12.     color: white;
  13.     padding: 20px;
  14.     font-size: 1.2em;
  15. }
  16. article h1{
  17.     font-family: Ayuthaya, serif;
  18.     color: white;
  19.     padding-left: 20px;
  20.     padding-top: 20px;
  21.     font-size: 2em;
  22. }
  23. hr{
  24.     width: 75em;
  25. }
  26. .cote {
  27.     float: right;
  28.     margin: 6px 6px 6px 6px;
  29.     text-align: justify;
  30.     padding: 1.5em 2em 1.5em 1.5em;
  31. }


 
J'aimerais donc faire passer une bande orange derrière l'image, le texte et le titre sur toute la largeur de l'article en diagonal, j'ai essayé d'utiliser une div avec un background, mais je n'y arrive pas, comme la div entours tout le texte quand je change sa taille ou sa rotation tout le texte change avec. J'ai aussi essayé d'utiliser deux background dans mon <article> mais je n'y arrive pas. Je vous ai envoyé un lien WeTransfer avec un screen du site et ce que je veux faire si vous ne compreniez pas. https://we.tl/t-UzMsQFyfKl
 
Si vous avez des solutions, je suis preneur, Merci de votre aide

Reply

Marsh Posté le 17-12-2022 à 20:22:15   

Reply

Marsh Posté le 19-12-2022 à 23:05:50    

En général pour faire du style "en plus" (sans la notion d’intérêt sémantique à ajouter des balises) on utilise des pseudo block :before ou :after dans le css.
https://code-garage.fr/blog/les-pse [...] er-en-css/
 
Dans ton cas faudra surement mettre ton conteneur en relative et virer l'overflow hidden et ton pseudo élément en absolute avec des positions négative pour qu'il "dépasse" du conteneur.


---------------
D3
Reply

Marsh Posté le 20-12-2022 à 20:43:12    

Bonjour, je te remercie pour ton aide ça à bien fonctionner tous est comme je le voulais. J'aurais une autre question qu'y n'a rien à voir, mais j'aimerais rajouter une animation pour faire en sorte que le texte arrive depuis un côté de mon article.

Code :
  1. article .orange::before{
  2.     content: url("image/orange.png" );
  3.     position: absolute;
  4.     display: inline-block;
  5.     bottom: 20px;
  6.     left: 800px;
  7.     transform: rotate(60deg);
  8.     z-index: -10;
  9. }
  10. article .rose::before{
  11.     content: url("image/rose.jpg" );
  12.     position: absolute;
  13.     display: inline-block;
  14.     bottom: 20px;
  15.     left: 800px;
  16.     transform: rotate(60deg);
  17.     z-index: -10;
  18. }
  19. article .blanc::before{
  20.      content: url("image/blanc.jpg" );
  21.      transform: rotate(300deg);
  22.      position: absolute;
  23.      display: inline-block;
  24.      bottom: 20px;
  25.      right: 800px;
  26.      z-index: -10;
  27. }
  28. article .orange{
  29.     animation-name: slidedroite;
  30.     animation-duration: 3s;
  31. }
  32. article .rose{
  33.     animation-name: slidedroite;
  34.     animation-duration: 3s;
  35. }
  36. article .blanc{
  37.     animation-name: slidegauche;
  38.     animation-duration: 3s;
  39. }
  40. @keyframes slidegauche{
  41.     from{
  42.         margin-left: 100%;
  43.         width: 100%;
  44.     }
  45.     to{
  46.         margin-left: 0%;
  47.         width: 100%;
  48.     }
  49. }
  50. @keyframes slidedroite{
  51.     from{
  52.         margin-right: 100%;
  53.         width: 100%;
  54.     }
  55.     to{
  56.         margin-left: 0%;
  57.         width: 100%;
  58.     }
  59. }


Voici le css que j'ai fait, pour l'animation de "slidegauche" tout marche correctement, mais pour la deuxième "slidedroite" qui est censé être la même, mais de faire venir tout mon article depuis l'autre côté, elle ne fonctionne pas du tout.  
J'aimerais aussi faire en sorte que les animations ne s'affiche pas tous immédiatement au chargement de la page, mais seulement quand il apparaisse à l'écran. <
 
Si vous avez des solutions, je suis preneur, merci.

Reply

Marsh Posté le 20-12-2022 à 22:52:30    

Ton slide droite anime de margin-right: 100%; à margin-left: 0%;
 
Pour ce qui est de déclencher l'animation au bon moment, a ma connaissance ce n'est pas possible en css pur, faut avoir un js avec un écouteur sur onscroll qui vérifie la position du truc pour voir si il est dans le viewport.
C'est très souvent utilisé pour des effets type parallax ou apparition mais c'est aussi assez gourmand en ressource donc plutôt mal vu...
 
Tu as wow.js par exemple pour ce genre de truc.
 


---------------
D3
Reply

Marsh Posté le 21-12-2022 à 18:46:00    

Je ne comprends pas pour le slide de droit. J'ai essayé en faisait de margin-right: 100%; à margin-left: 0%; en faisant margin-leftt: 100%; à margin-right: 0%;. Il ne se passe rien, cela ne bouge pas. Il y a que quand je change le width: qu'il se passe un truc, mais là encore, c'est très bizarre, une partie du texte est déjà dans l'article et une autre partie arrive avec l'animation.

Reply

Marsh Posté le 21-12-2022 à 20:26:08    

Les propriétés margin-left et margin-right sont aussi différente que width et height, donc tu n'animes rien du tout.
 
Si tu veux animer "une arrivée" par le coté il faut utiliser margin-left aussi bien pour les from et les to (et margin-right si tu veux renverser le mouvement).
Je t'ai fait un exemple : https://jsfiddle.net/ph24vztu/
 
Après le texte prend la place disponible par le bloc, ça donne un effet mais je ne suis pas sur que ce soit celui souhaité... ^^
 
Pour ce genre de cas je préférerais utiliser la propriété css transform:translate();.


---------------
D3
Reply

Marsh Posté le 23-12-2022 à 14:01:25    

Pour info on peut cumuler les background dans la property background :  
 
background : url("image1.png" ), url("image2.png" ), red;


---------------
Blablaté par Harko
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed