Chevauchement d'images dans la grille CSS

J'ai besoin de deux images pour chevaucher dans une mise en page CSS sans tricher et cela doit être fait avec la grille CSS. Cela signifie qu'il devrait rester dans les cellules de mise en page. Voici ce que je travaille sur: « Le milieu » doit être centré sur l'image et toutes deux sur la page, respectivement la « bannière » -CellChevauchement d'images dans la grille CSS

La mise en page CSS suivant devrait rester le même souhaitable:

.container { 
    display: grid; 
    grid-template-columns: 15% 70% 15%; 
    grid-template-rows: 20% 20% 20% 20% 20%; 
    grid-gap: 2px; 
    grid-template-areas: 
     'banner banner banner' 
     'sidebar content fb' 
     'sidebar content fb' 
     'sidebar content fb' 
     'src src src'; 
} 

.banner { 
    grid-area: banner; 
}

Je l'ai déjà essayé ces méthodes:

justify-items: center; 
justify-content: center; 
align-content: center; 
align-self: center; 
text-align: center;

la méthode avec des positions absolues est bien passé, mais il ne tient pas compte de la grille complètement si la grille réelle est sous l'image. Il serait possible d'appliquer un padding à la cellule "banner" pour faire baisser le contenu mais c'est le genre de triche que je veux éviter. J'ai besoin de ces 2 images pour rester chevauchées dans cette cellule "bannière", mais je manque d'options et il n'y a pas beaucoup de réponses là-bas parce que la grille CSS est assez récente.

Le code HTML:

<body class="body"> 

<div class="container"> 

    <div class="banner"> 

     <img id="skyline" src="Pictures/SkylinePH.jpg"> 
     <img id="logo" src="Pictures/Logo2.png">    

    </div> 



</div>

Je suis très reconnaissant pour toute aide! Merci à l'avance :)

Source

2017-08-18 Philipp

Ces méthodes de ēno devraient travailler dans la grille, aussi bien. https: // stackoverflow.com/q/35871294/3597276 –

La méthode avec les positions absolues a bien fonctionné, mais elle ne tient pas compte de la grille complètement ainsi la grille réelle est sous l'image.

Vous ne devez position: absolute les deux images - vous pourriez avoir l'image de la bannière, qui est plus grande et va être derrière le logo, occuper l'espace, il serait normalement dans la cellule de grille CSS. Ensuite, vous pouvez positionner et centrer le logo sur le dessus. Cela fonctionnerait-il?

EDIT: Certains CSS pour essayer d'y parvenir:

.banner { 
    position: relative; /* so we can position the logo based on this container */ 
    text-align: center; /* so the skyline image is horizontally centered */ 
} 

#logo { 
    position: absolute; /* these 4 lines will center the logo */ 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

Source

2017-08-18 17:42:34

Merci pour la réponse rapide Malheureusement pas. Le logo apparaît sur le bon site de la bannière si je le fais. Et d'une certaine manière, la bannière devrait également être centrée sur la page – Philipp

Pouvez-vous nous montrer que dans un extrait de code afin que nous puissions résoudre l'implémentation? –

Bien sûr, a édité mon message – Philipp

Texte sur image. Avec la disposition de la grille CSS.

HTML

<div id="container"> 
    <img src="some-image.jpg"> 
    <p>SOME TEXT OVER IMAGE</p> 
</div>

CSS

#container{ 
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: repeat(3, 1fr); 
} 

#container img{ 
    grid-column: 1; 
    grid-row: 1/span 3; 

    width: 100%; 
    height: 100%; 

    overflow: hidden; 
} 

#container p{ 
    grid-column: 1; 
    grid-row: 2; 

    align-self: center; 
    justify-self: center; 

    z-index: 1; 
}

image sur image. Avec la disposition de la grille CSS.

HTML

<div id="container"> 
    <img id="img-1" src="image-1.jpg"> 
    <img id="img-2" src="image-2.jpg"> 
</div>

CSS

#container{ 
    display: grid; 
    grid-template-columns: 1fr; 
    grid-template-rows: repeat(3, 1fr); 
} 

#container #img-1{ 
    grid-column: 1; 
    grid-row: 1/span 3; 

    width: 100%; 
    height: 100%; 

    overflow: hidden; 
} 

#container #img-2{ 
    grid-column: 1; 
    grid-row: 2; 

    align-self: center; 
    justify-self: center; 

    z-index: 1; 
}

Source

2017-10-12 13:53:31 Ted

Chevauchement d'images dans la grille CSS

Répondre

Questions connexes