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
4 Möglichkeiten, mit CSS ein zweispaltiges Layout mit fester linker Spalte und adaptiver rechter Spalte zu erreichen
1. Float + Überlauf: versteckt Diese Methode löst...
Detaillierte Erklärung des Vue-Elements plus Mehrsprachenumschaltung
Inhaltsverzeichnis Vorwort Wie wechselt man zwisc...
Detaillierte Analyse von MySQL-Ausführungsplänen
Vorwort Als wir im vorherigen Interviewprozess na...
So rufen Sie das Kennwort für MySQL 8.0.22 auf dem Mac ab
Neueste Version von MySQL 8.0.22 zur Kennwortwied...
CSS zur Implementierung von Sprites und Schriftsymbolen
Sprites: In der Vergangenheit war jede Bildressou...
Der Unterschied und die Verwendung des Kommunikationsbusses der Bruderkomponenten von Vue2 und Vue3
Inhaltsverzeichnis vue2.x vue3.x Verwendung des T...
Einige Methoden zur Dateiberechtigungsverwaltung unter Linux, die Sie möglicherweise nicht kennen
Warum brauchen wir ein Berechtigungsmanagement? 1...
Beheben Sie das Problem, dass nach der Installation von Centos7 in VMware kein Ping an das externe Netzwerk möglich ist
Beim Konfigurieren eines Clusters ist ein Problem...
Korrekte Änderungsschritte für das Standardnetzwerksegment von Docker
Hintergrund Ein Kollege arbeitet an seinem Sicher...
Installationsprozess von VMware vCenter 6.7 (grafisches Tutorial)
Hintergrund Ursprünglich wollte ich ein 6.7 Vcent...
Daten in der Layui-Tabellenzeile dynamisch bearbeiten
Inhaltsverzeichnis Vorwort Stil Funktion Beschrei...
So fügen Sie in 88 Sekunden 10 Millionen Datensätze in eine MySQL-Datenbanktabelle ein
Die von mir verwendete Datenbank ist MySQL Datenb...
Entwurf und Implementierung einer kaskadierenden Dropdown-Box in Vue
Inhaltsverzeichnis 1. Datenbankdesign 2. Frontend...
Docker CP kopiert Dateien und gibt den Container ein
Geben Sie den laufenden Container ein # Geben Sie...
So verhindern Sie mit Nginx die böswillige Auflösung von IP-Adressen
Zweck der Verwendung von Nginx Lassen Sie uns zun...