Beispielcode zum Erzielen eines dreidimensionalen Bildplatzierungseffekts mit reinem CSS
|
1. Prozentuale Basis für Elementbreite/-höhe/-polsterung/-rand Kennen Sie den Richtwert, wenn Sie den Prozentsatz für Breite/Höhe/Polsterung/Rand eines Elements festlegen? Zum Beispiel:
.übergeordnet {
Breite: 200px;
Höhe: 100px;
}
.Kind {
Breite: 80%;
Höhe: 80%;
}
.KindKind {
Breite: 50%;
Höhe: 50%;
Polsterung: 2%;
Marge: 5%;
}
<div Klasse="übergeordnet">
<div Klasse="Kind">
<div Klasse="KindKind"></div>
</div>
</div>Wie breit ist das untergeordnete Element im obigen Code? Was ist Höhe? Was ist die Polsterung? Wie hoch ist die Marge? Die prozentuale Höhe eines Elements basiert auf der Höhe seines übergeordneten Elements und die prozentualen Breiten-, Polsterungs- und Randwerte eines Elements basieren auf der Breite seines übergeordneten Elements. Ich glaube, jeder hat es bereits herausgefunden. Sie können es ausprobieren ~ In Vorstellungsgesprächen stößt man häufig auf eine einfache Frage im CSS-Stil, nämlich die Implementierung eines adaptiven Quadrats. Das Prinzip basiert auf den oben genannten Erkenntnissen. Ich brauche nur
#Kasten {
Breite: 50%;
Polsterung oben: 50%;
Hintergrund: #000;
}Da die Basiswerte der Elementbreite und des Abstands die Breite des übergeordneten Elements sind und die Breite des Hauptteils das Browserfenster ist, passt sich diese Einstellung dem Quadrat an, wenn sich die Größe des Browserfensters ändert. 2. Verwenden Sie reines CSS, um den Effekt einer dreidimensionalen Bildplatzierung zu erzielen Zurück zum Thema: Wenn Sie den dreidimensionalen Platzierungseffekt der in der folgenden Abbildung gezeigten Bilder erzielen möchten, müssen Sie Ihr Wissen über Polsterung, Breite und Höhe anwenden.
Das kommt mir irgendwie bekannt vor. Ist es dem Stil der empfohlenen Bücher in neuer Software ähnlich? Schauen wir uns hier zunächst die Platzierung an. Ein Bild ist horizontal zentriert und im Vordergrund, während die anderen beiden Bilder links und rechts und etwas weiter hinten ausgerichtet sind, sodass eine dreidimensionale Platzierung entsteht. Hier habe ich eine Möglichkeit kennengelernt, diesen dreidimensionalen Effekt ganz einfach durch den Einsatz von CSS zu erzielen. Die unterschiedlichen Höhen werden durch die Polsterung auf der Oberseite unterstützt, die groß oder klein sein kann. · Die Vorher- und Nachher-Effekte werden durch die Faltreihenfolge des Z-Index gesteuert. Die Anordnung wird durch das n-te Pseudoelement + Position gesteuert.
Hast Du eine Idee? Reden wir nicht um den heißen Brei herum und kommen wir direkt zum Code.
<html>
<Kopf>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
.Kasten {
Breite: 300px;
Höhe: 200px;
Position: relativ;
}
.img {
Breite: automatisch;
Höhe: 0;
}
.box img {
Breite: 100 %;
Anzeige: Inline-Block;
}
.box .img:n-ter-Typ(1) {
Anzeige: Inline-Block;
Position: absolut;
links: 50%;
oben: 50 %;
Polsterung unten: 50 %;
transformieren: übersetzen(-50 %, -50 %);
Z-Index: 6;
}
.box .img:n-ter-vom-Typ(2), .box .img:n-ter-vom-Typ(3) {
Position: absolut;
oben: 50 %;
transformieren: verschiebeY(-50%);
Polsterung unten: 63 %;
Z-Index: 3;
}
.box .img:n-ter-Typ(2) {
rechts: 0;
}
.box .img:n-ter-Typ(3) {
links: 0;
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
<div Klasse="img">
<img src="https://febaidu.com/list/img/3ns.png" />
</div>
<div Klasse="img">
<img src="https://febaidu.com/list/img/3ns.png" />
</div>
<div Klasse="img">
<img src="https://febaidu.com/list/img/3ns.png" />
</div>
</div>
</body>
</html>Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. |
>>: React-Internationalisierung react-i18next ausführliche Erklärung
Artikel empfehlen
So fügen Sie Wettervorhersagen in Ihre Website ein
Wir hoffen, dass wir durch die Einbindung der Wet...
So implementieren Sie eine bidirektionale Bindungsfunktion in vue.js mit reinem JS
Inhaltsverzeichnis Lassen Sie uns zunächst über d...
So verwenden Sie den Linux-Befehl whatis
01. Befehlsübersicht Der Befehl whatis sucht in e...
Detaillierte Erklärung der Bedeutung von N und M im MySQL-Datentyp DECIMAL(N,M)
Ein Kollege fragte mich, was N und M im MySQL-Dat...
Detaillierte Erläuterung des Implementierungsprozesses der ServerSocket-Standard-IP-Bindung
Wenn der Server während der Entwicklung gestartet...
MySQL-Beispiel zur Erläuterung von Einzelzeilenfunktionen und Zeichenmathematik, Datumsprozesssteuerung
Inhaltsverzeichnis 1. Zeichenfunktion 1. Fallkont...
8 Tipps für Vue, die Sie nach dem Lesen lernen werden
1. Verwenden Sie immer :key in v-for Die Verwendu...
Zwei Möglichkeiten, mit IIS X-Forwarded-For Header (XFF) aufzurufen, um die tatsächliche IP des Besuchers aufzuzeichnen
Problem: Die über IIS veröffentlichte Website wir...
Erkunden Sie die gängigen VMware ESXI CLI-Befehle
Inhaltsverzeichnis 【Allgemeine Befehle】 [Zusammen...
JavaScript-Canvas zum Laden von Bildern
In diesem Artikel wird der spezifische Code von J...
So verwenden Sie den Yum-Befehl
1. Einführung in yum Yum (vollständiger Name Yell...
Detaillierte Erläuterung der Implementierungsmethode für Linux inotify-Echtzeitsicherungen
Die Echtzeitreplikation ist die wichtigste Method...
Node+Socket realisiert einfache Chatroom-Funktion
In diesem Artikel wird der spezifische Code von N...
Layui implementiert den Bestätigungscode der Anmeldeschnittstelle
In diesem Artikelbeispiel wird der spezifische Co...
Einführung in die Installation des Vim-Plugins unter Linux
Inhaltsverzeichnis Installieren Sie den Vim-Plugi...