So fügen Sie zwei Hintergrundbilder hinzu - links und rechts von der mittleren Spalte
Ich habe dieses CSS:
%Vor%und dieses html:
%Vor%Ich muss 2 Bilder hinzufügen - links und rechts von der mittleren Spalte ohne Änderungen der mittleren Spaltenbreite und dass die Bilder die Gesamtbreite der Seite nicht beeinflusst haben. Beispiel:
Ich kann Bilder hinzufügen und einige Versuche durchführen
-
wenn ich versuche, die Browserbreite zu ändern - Hintergrundbilder gehen unter die zentrale Spalte
-
Ich habe versucht,
min-width:1020px; to min-width:1665px;zu ändern - auf den ersten Blick ist alles in Ordnung, aber für die Bildschirmauflösung - weniger als 1665px ist der Inhalt nach rechts verschoben Ich habe einige Möglichkeiten ausprobiert, aber erfolglos
Meine Frage: Kann ich ein Bild so platzieren, dass, wenn Sie die Breite des Browsers ändern - den Abstand links und rechts von der mittleren Spalte reduzieren (dies ist das Standardverhalten, wenn keine Hintergrundbilder vorhanden sind)
Hier ist Code mit Bildbeispielen.
Wenn ich ein großes Bild mit 1020px blankem Mittelteil mache und meine linken / rechten Bilder hineinlege ... wird es funktionieren?
2 Antworten
Sie können mehreren Lösungen folgen:
1) Verwenden Sie divs: [gut]
Das Erstellen eines guten "Rahmens" von divs kann Ihr Problem lösen, zum Beispiel so:
%Vor%Und ein Pseudocode von CSS (nicht getestet):
%Vor%Anschließend können Sie mit CSS (Floating und Größen) die Ansicht anpassen.
2) Verwenden Sie mehrere Hintergründe: [nicht immer gut]
Sie können diesen CSS-Pseudocode verwenden, um mehrere Hintergründe zu verwenden (hier zu finden: Ссылка )
%Vor%3) Verwenden Sie statisches "großes" Bild: [faule Lösung]
Verwenden Sie ein statisches Bild, wie Sie es vorschlagen (mit Leerzeichen in der Mitte), kann das Problem ebenfalls lösen, aber wenn die Website "reaktionsfähig" ist, können Grafikprobleme mit unterschiedlicher Bildschirmauflösung auftreten (oder die Größe des Browserfensters ändern). In diesem Fall müssen Sie auch die Position und die Breite der mittleren Spalte anpassen (bei der Größenänderung des Fensters).
4) Responsive Design verwenden: [excellent - do it!]
Um zu vermeiden, dass sich die Bilder auf dem zentralen (Inhalts-) Teil überlappen, können Sie als Hintergrundfarbe (dieses Teilbereichs) weiß festlegen.
Um Überlappungen zu vermeiden, können Sie ein "spezielles" responsives CSS festlegen. Das erkennt, wenn das Fenster Breite & lt; X die 2 Bilder verschwinden. Zum Beispiel mit diesem CSS-Pseudocode:
%Vor%Hier finden Sie einige Links zu responsiven Designs im Web:
Tags und Links html css css3 background-image positioning