So überlappen Sie mehrere Bilder mit CSS

CSS steht für Cascaded Stylesheet. Es ist eine Stylesheet-Sprache, die die Präsentation des Dokuments in einer Auszeichnungssprache wie HTML definiert. Cascaded Stylesheet unterscheidet den Inhalt und andere visuelle Präsentationen wie Farben, Layout, Schriftarten und Themen. Diese Unterscheidung verbessert den Zugriff auf die Inhalte und steuert die Spezifikation von Präsentationen. CSS definiert ein gemeinsames Thema für die ausgewählten Webseiten und ist auf der gesamten Website sichtbar. Die Details der CSS-Datei werden separat gehalten, um die komplexen Probleme und die redundante Inhaltsstruktur zu reduzieren.

CSS ist verfügbar, um mehrere Bilder zu überlappen, d. h. ein Bild über das andere Bild zu legen. Dazu gibt es drei Methoden. Schauen wir uns jeden von ihnen einzeln an.

1. CSS-Raster verwenden:

Stift

Ein CSS-Grid ist die leistungsstärkste zweidimensionale CSS-Funktion, die Zeilen und Spalten und den darin enthaltenen Inhalt verarbeitet. Sie können sowohl mit übergeordneten Elementen als auch mit untergeordneten Elementen arbeiten, indem Sie mit CSS-Regeln arbeiten. Das Raster in CSS hat die Art und Weise, wie Sie die Webseite und ihren Inhalt gestalten, grundlegend verändert. Um mit dem Raster zu arbeiten, sollten Sie den Rastercontainer, das Rasterelement, die Rasterlinie und die Rasterzelle kennen. Es enthält auch andere Begriffe wie Rasterbahn und Rasterfläche. Untergeordnete Elemente eines Gittercontainers können sich so positionieren, als ob sie andere zu überlappen scheinen.

Sie können feste und flexible Spurgrößen in einem Raster mit Pixeln erstellen. Durch die Angabe einer bestimmten Anzahl von Pixeln kann das Raster so eingestellt werden, dass es dem gewünschten Layout entspricht. Um eine flexible Rasterspur anzugeben, können Sie die Werte in Prozent angeben.

Das wichtigste Merkmal von CSS Grid ist, dass es Bilder überlappen kann, indem es Z-Indizes ändert, ohne den regulären Dokumentenfluss zu unterbrechen. Durch die Verwendung eines CSS-Rasters können Sie mit beliebiger Höhe und Breite des besagten Elements arbeiten. Darüber hinaus wird das obere Bild immer nach unten platziert, was an der linken unteren Ecke ausgerichtet ist. Das Bild richtet sich an der linken Kante des Containerelements aus.

Der HTML-Code dazu:

<div class="image-stack">

<div class=“image-stack__item image-stack__item – top“>

<img src=“Https://sourceoftheimage.com/s.cdpn.io.110238/image1.jpeg“ alt=“Das erste Bild“>

</div>

<div class="image-stack__item image-stack__item – unten">

<img src=https://another-source.com/s.cdpn.io/110238/portrait-1-secondImage.jpg alt=”zweites Bild”>

</div></div>

Sie können dem Element das Attribut role="presentation" hinzufügen, wenn das Bild dekorativ aussieht. Mit dieser Spezifikation würde das Bild für die Leser des Bildschirms nicht gerendert werden.

Nun müssen wir die Breite der Spalten im berücksichtigten Raster angeben. Hier gibt es mehrere Möglichkeiten, dies zu tun, aber wir werden ein 12-Spalten-Raster erstellen, da das 12-Spalten-Raster im Allgemeinen verwendet wird.

Dazu werden wir in unserer CSS-Datei im übergeordneten Element, das andere Elemente enthält, Folgendes angeben:

.image-stack

{

Anzeige: Raster;

Grid-Template-Spalten: repeat(12, 1fr);

Position: relativ;

}

Grid-Template-Columns sind ein Merkmal, um die Anzahl der Spalten anzugeben, die ein Grid haben soll. Während 1fr den Browser angibt, den verfügbaren Speicherplatz zu berechnen. Diese Dinge sind nützlich, wenn Sie Lücken in Spalten und Zeilen haben.

Position: Relativ ist hier von Bedeutung. Dadurch kann der Z-Index für Bilder gemäß unseren Anforderungen und Spezifikationen funktionieren. Sobald Sie ein funktionales Raster zur Verfügung haben, müssen Sie sich die Breite der Bilder ansehen. Um den Bildern Breite hinzuzufügen, ist die ideale Spezifikation die Angabe der Breite in Prozent. Jetzt sollten Sie mit der Gesamtbreite der Komponente beginnen, die sich auf das Bild bezieht. Die Breite des Bildes beträgt 844 px, also 100 %. Die Breite des oberen Bildes beträgt 521 px. Hier können wir 521px durch 844px dividieren. Nun muss der resultierende Wert mit 100 multipliziert werden, was ungefähr 61,7 % entspricht.

Wenn Sie 61,7 % auf 62 % aufrunden, sehen Sie, dass Sie einen Wert zwischen 58 % und 66 % erhalten. Daher werden wir 66 % übernehmen. Für das Bild oben haben wir den folgenden Code, der in CSS einfließt:

.image-stack__item – oben

{

Gitterspalte: 1/Span 8;

Gitterreihe: 1; // es muss sich in derselben Zeile wie das zweite Bild befinden

Padding-top: 20% // Dies platziert das Bild nach unten und hält es proportional.

Z-Index: 1; // Dadurch wird das Bild oben auf dem unteren Foto gerendert.

}

Für das zweite Bild berechnen wir:

645 px/844 px und der Wert muss mit 100 multipliziert werden, was 76,4 % ergibt. Wir werden auf 75 % aufrunden, was perfekt in unser 12-Spalten-Raster im CSS passt.

Sie müssen darauf achten, dass das untere Bild neun Spalten einnimmt und ab der 4. ^Gitterlinie zu rendern beginnt. Damit sollte das Bild den Rest des Rasters einnehmen.

Der CSS-Code für das Bild unten lautet wie folgt:

.image-stack__item – unten

{

Gitterspalte: 4

Gitterreihe: 1; // Dadurch erscheint das Bild in derselben Zeile

}

Mit CSS Grid ist jede Art von Überlappung möglich. Das Überlappen kann Bilder über Bilder, Text über Bilder oder sogar Text, der den Text überlappt, umfassen. Es bietet so viele Möglichkeiten, wie Sie sich vorstellen können. Der endgültige Code sieht wie folgt aus:

<div class=“container“> <p>CSS-Grid-Methode</p> <div class=“image-stack“> <div class=“image-stack__item image-stack__item–top“>

<Img src=“Https//sourceoftheimage.com/s.cdpn.io.110238/image1.jpeg“ alt=Das erste Bild“></div>

<div class="image-stack__item image-stack__item–bottom">

<img src=https://another-source.com/s.cdpn.io/110238/portrait-1-secondImage.jpg alt=”zweites Bild”></div>

</div> <p>Hier kommt der Textinhalt hin.</p> </div>

2. Floating mit negativen Margen:

Stift

Die Float-Eigenschaft von CSS platziert das Webseitenelement auf der linken oder rechten Seite seines Containers. Es ermöglicht dem Text und den Inline-Elementen, das Element zu umschließen. Obwohl ein Float-Element Teil der Seite ist, wird es dennoch aus dem normalen Fluss herausgeholt. Mit der Float-Eigenschaft verschiebt sich das Element nach rechts oder links, um den Rand seines Containerelements zu berühren.

Die Float-Eigenschaft lässt die Elemente um sie herum schweben. Diese Eigenschaft rendert die Elemente und Inhalte, die dem Druckdesign ähneln. Ein solches Konzept wird Textumbruch genannt. Das heißt, der Text umschließt die Elemente. Im Druckdesign könnten die Komponenten Bilder sein, um die herum der Text schwebt. Wenn Sie den Textumbruch ignorieren, überlappt der Text das Bild, als ob das Bild nicht vorhanden wäre. Sie können Floats verwenden, um das Layout einer ganzen Webseite oder Website zu gestalten. Es ist nicht nur darauf beschränkt, den Text um die Webseitenelemente zu wickeln.

Der Code hier wird jeden Browser unterstützen, einschließlich Internet Explorer. Diese Methode konzentriert sich darauf, die Elemente aus dem Dokument zu nehmen und sie mit Float zu rendern. Das Beste an dieser Codierungssyntax ist, dass die Struktur der zuvor erwähnten Struktur ähnlich bleibt. Für das übergeordnete Element im Bildstapel verwenden wir „clear“, da wir seine untergeordneten Elemente floaten. Hier wird der Inhalt unter dem Bild gerendert. Die Syntax ist wie folgt:

.image-stack::nachher

{

Inhalt: ' ';

Anzeige: Tabelle;

Lösche beide;

}

Der obige Code gilt für das unten platzierte Bild. Daher wird das zweite Bild über dieses Bild gehen.

Nun, für das oben platzierte Bild ist der folgende Code:

.image-stack__item – oben

{

Schwimmer: links;

Breite: 66 %;

Margin-Recht: -100 %;

Wattierung oben: 15 %;

Position: relativ;

Z-Index: 1;

}

Wir haben eine bestimmte Marge in einem negativen Wert, was von Bedeutung ist. Die negative Marge verhält sich in verschiedenen Situationen unterschiedlich. Setzen sie oben oder unten an, wirken sie in besonderer Weise. Und sie verhalten sich anders, wenn der negative Rand links oder rechts von den Floating-Elementen liegt.

Hier haben wir den negativen rechten Rand auf das schwebende linke Element angewendet, das die Überlappung des Bildes ermöglicht. -100 % ist die Breite des Bildcontainers. Dieser Wert wird links platziert und lässt das Bild unten darunter rendern, als wäre es nicht im Dokumentobjektmodell. Daher sieht der endgültige Code wie folgt aus:

{

Box-Größe: Border-Box;

}

p {

Schriftgröße: 20px;

Schriftfamilie: serifenlos;

Farbe: #6439a9;

}

.container {

Polsterung: 100px 30px;

Breite: 100 %;

Rand: 0 automatisch;

maximale Breite: 900px;

}

// löschen

.image-stack::after {

Inhalt: ' ';

Anzeige: Tabelle;

Lösche beide;

}

.image-stack__item–top {

Schwimmer: links;

Breite: 66 %;

Rand rechts: -100 %;

Wattierung oben: 15 %; // willkürlich

Position: relativ;

Z-Index: 1;

}

.image-stack__item–unten

{

schweben rechts;

Breite: 75 %;

}

Bild

{

Breite: 100 %;

}

3. CSS Grid- und Float-Methoden kombiniert:

Stift

Die Codes in dieser Methode unterstützen die Arbeit auf allen Browsern. Es gibt auch den Code an, in dem es auf bestimmten Browsern, die alt und veraltet sind, perfekt funktioniert. Hier verwenden wir die Funktion „@supports“, die ein wesentlicher Bestandteil dieser Methode ist. Es soll geprüft werden, ob der betrachtete Browser den Wert „display: grid“ unterstützt. Wir werden den Code verwenden, der den Internet Explorer-Browser unterstützt, bevor wir die Funktion „@supports“ des Codes verwenden.

In der Funktion „@supports“ setzen wir die Breite auf 100 % zurück. Nun hat die Float-Eigenschaft hier keine Bedeutung, da sie auf 100 % gesetzt wird. ing, IE-Browser in Betracht zu ziehen, unterstützt anner. Und sie verhalten sich anders, wenn das negative m. Es wird die verwendeten Elemente nicht beeinträchtigen. Daher sieht der endgültige Code dafür wie folgt aus:

<div class=“container“> <p>Browserübergreifende Methode</p> <div class=“image-stack“> <div class=“image-stack__item image-stack__item–top“> <img src=“https: //firstimagesource.com/s.cdpn.io/110238/image1.jpeg” alt=””> </div> <div class=”image-stack__item image-stack__item–bottom”> <img src=”https:/ /secondimagesource.com/s.cdpn.io/110238/secondImage.jpg” alt=””> </div> </div> <p>Der Textinhalt gehört hierher.</p> </div>

Die Vorteile der Verwendung von Rastern:

Stift

Die Reduzierung der Codierung ist der wesentliche Vorteil bei der Verwendung von CSS-Grids. Anstatt zusätzliche HTML-Elemente als Grundlage für Ihr Raster zu generieren, verwenden Sie ein Stylesheet, um ein Raster zu erstellen. Grid-Frameworks verwenden nicht immer semantisch korrekte Namen der Klasse. Da ein CSS-Grid von Natur aus nativ ist, müssen Sie keine großen Bibliotheken in Ihr Projekt aufnehmen, um es zu unterstützen. CSS-basierte Webentwicklung ist schneller, da das Erlernen der Syntax einfach ist. Darüber hinaus ist das Prototyping mit CSS schnell und effektiv.

Mit wachsender Browserunterstützung können Sie das Grid praktisch überall nutzen. Die Tutorials für das Grid sind überall verfügbar; Jeder, vom Anfänger bis zum fortgeschrittenen Entwickler, kann es verwenden. Ein Grid ermöglicht eine einfache Implementierung der Benutzeroberfläche einer Webseite über verschiedene Kontexte hinweg. Sie können ein ansprechendes, strukturiertes Layout ohne endlosen Textumbruch erstellen und drei Spaltenlayouts verwenden. Ein Grid bietet einfache Pflege und Flexibilität bei der Gestaltung der Webseite. Darüber hinaus können Sie gleichzeitig mit Zeilen und Spalten arbeiten, um komplizierte und dennoch flexible Pläne zu erstellen. Da die meisten Browser das Grid-System unterstützen, benötigen Sie keinen Fallback-Code, damit es funktioniert.

Ein Raster ermöglicht es einem Designer, ein kreatives und beeindruckendes Website-Layout zu erstellen. Darüber hinaus haben die Designer die Wahl, es in ein ansprechendes Design umzuwandeln, ohne das Gesamterscheinungsbild und die visuelle Ästhetik des Designs zu beeinträchtigen. CSS kombiniert sowohl das Raster als auch die Designideen des Designers, um ein sofort einsatzbereites Design zu generieren. Dieses Design sieht sowohl atemberaubend aus als auch ansprechend auf den technisch versierten Benutzer von heute.

Fazit:

Die Überlagerung von Bildern ist ein spannendes Konzept in der Welt des Designs. Wenn ein Entwickler die Überlappung der Fotos handhaben muss, können Sie die genannten Wege gehen. Wenn Sie sich als Entwickler mit CSS auskennen, wissen Sie, dass es praktisch möglich ist, alles zu erreichen, was Sie möchten. Aber die Anfänger können sich dieses Tutorial ansehen und die Bildüberlappung mit sehr viel weniger Zeit erreichen. Er sollte wissen, welcher Code in welche Datei kommt.