Analyse des Ausschnitts des Hintergrundbildes des Neunerrasters mit adaptiver Breite und Höhe

Analyse des Ausschnitts des Hintergrundbildes des Neunerrasters mit adaptiver Breite und Höhe
<br />Basierend auf dem ursprünglichen, in Breite und Höhe adaptiven Neuner-Raster-Layout haben wir einige Optimierungen vorgenommen und acht Hintergrundbildanforderungen in eine geändert, um die Netzwerkkosten zu senken. Tatsächlich sind dies nur einige einfache Tipps. Wenn Sie beim Zuschneiden von Bildern sehr streng sind, treten bei einer 1-Pixel-Asymmetrie Probleme auf. Bitte beachten Sie die Zuschneideanalyse des folgenden Beispiels.
RAR: modul.zip
Anweisungen :
Bildschnittanalyse

Der Schlüssel besteht darin, ein teilweise transparentes Hintergrundbild zu verwenden und ein zusätzliches <SPAN>-Tag hinzuzufügen, um den Hintergrund für jeden adaptiv erweiterten XHTML-Teil zu lesen, um so den erweiterten Hintergrund links oder rechts oder oben und unten versetzt auszufüllen. Um das Problem zu lösen, dass der IE keine 100 % Höhe erreicht, werden die Höhen der linken und rechten Erweiterung als absolute Werteinheiten von 3000 Pixeln geschrieben (je nach Bedarf angepasst).
Manko :
Das Hintergrundbild muss transparent sein, daher können Bilder im JPG-Format nicht verwendet werden. (Ich hoffe, jemand kann dieses Problem lösen)

<<:  Detaillierte Erklärung zur Konfiguration der OpenGauss-Datenbank im Docker

>>:  Detailanalyse der MySQL-Berechtigungskontrolle

Artikel empfehlen

Unterschied zwischen src- und href-Attributen

Es besteht ein Unterschied zwischen src und href ...

So konfigurieren Sie eine statische Netzwerkverbindung in Linux

Das Konfigurieren der Netzwerkkonnektivität für L...

Wertschätzung des dezenten und eleganten Webdesigns in Schwarz, Weiß und Grau

Unter den klassischen Farbkombinationen kann wohl...

Instanzmethode für MySQL-String-Verkettung und Festlegen von Nullwerten

#String-Verkettung concat(s1,s2); verkette die St...

So implementieren Sie die Unschärfefunktion von DIV

Verwenden Sie Anti-Shake, um DIV verschwinden zu ...

Eine kurze Einführung in JavaScript-Arrays

Inhaltsverzeichnis Einführung in Arrays Array-Lit...

Vue Grundlagen Listener Detaillierte Erklärung

Inhaltsverzeichnis Was ist ein Listener in Vue? V...

Kompatibilität mit der Inline-Block-Eigenschaft

<br />Vor einem Jahr gab es im Internet kein...

Abrufen der Erstellungszeit einer Datei unter Linux und ein praktisches Tutorial

Hintergrund Manchmal müssen wir den Erstellungsze...

Designideen für MySQL-Backup und -Wiederherstellung

Hintergrund Lassen Sie mich zunächst den Hintergr...

So richten Sie einen FTP-Server in CentOS7 ein

FTP wird hauptsächlich für die Dateiübertragung v...