Heim > Web-Frontend > CSS-Tutorial > Wie kann ich in CSS einen zweifarbigen geteilten Hintergrund erstellen?

Wie kann ich in CSS einen zweifarbigen geteilten Hintergrund erstellen?

Patricia Arquette
Freigeben: 2024-12-01 01:04:10
Original
327 Leute haben es durchsucht

How Can I Create a Two-Colored Split Background in CSS?

CSS: Legen Sie eine Hintergrundfarbe fest, die 50 % des Fensters ausmacht

Es wird versucht, einen Hintergrund auf einer Seite zu erreichen, der „ in zwei Teile gespalten"; zwei Farben auf gegenüberliegenden Seiten? Glücklicherweise gibt es mehrere Möglichkeiten, diesen Effekt zu erzielen, abhängig von Ihren Browser-Unterstützungsanforderungen.

Unterstützung älterer Browser

Wenn die Unterstützung älterer Browser ein Muss ist, dann sind Sie hier genau richtig Ich muss ein zusätzliches festes Div verwenden, das die Hälfte des Bildschirms ausfüllt, und seinen Hintergrund festlegen Farbe.

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink; 
Nach dem Login kopieren

}

Moderne Browser

Wenn Neuere Browser sind Ihre einzige Sorge, Sie haben mehr Optionen:

Linearer Verlauf:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
Nach dem Login kopieren

}

Mehrere Hintergründe mit Hintergrundgröße:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height: 100%;
background-color: cyan;
Nach dem Login kopieren

}

body {

height: 100%;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;
Nach dem Login kopieren

}

Vergessen Sie nicht, die Höhe sowohl für das HTML- als auch für das Body-Element auf 100 % festzulegen, um sicherzustellen, dass Der Hintergrund deckt das gesamte Ansichtsfenster ab.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS einen zweifarbigen geteilten Hintergrund erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Vorheriger Artikel:Wie kann ich mit jQuerys „addClass()“ und „removeClass()“ jeweils nur ein Listenelement hervorheben? Nächster Artikel:Wie kann ich Dreieckspfeile in HTML erstellen, ohne Bilder zu verwenden?
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage