wake-up-neo.com

CSS: Legen Sie eine Hintergrundfarbe fest, die 50% der Breite des Fensters beträgt

Versuchen Sie, einen Hintergrund auf einer Seite zu erhalten, die "in zwei Hälften geteilt" ist; zwei Farben auf gegenüberliegenden Seiten (scheinbar durch Festlegen eines standardmäßigen background-color am body-Tag und anschließendes Anwenden eines anderen auf ein div, das die gesamte Fensterbreite ausdehnt).

Ich habe mir eine Lösung ausgedacht, aber leider funktioniert die background-size-Eigenschaft in IE7/8 nicht, was für dieses Projekt ein Muss ist.

body { background: #fff; }
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

Da es sich nur um einfarbige Farben handelt, gibt es vielleicht eine Möglichkeit, nur die normale background-color-Eigenschaft zu verwenden.

106
Staffan Estberg

Unterstützung älterer Browser

Wenn ältere Browser-Unterstützung ein Muss ist und Sie daher nicht mit mehreren Hintergründen oder Farbverläufen arbeiten können, möchten Sie wahrscheinlich ein solches div-Element verwenden:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

Beispiel: http://jsfiddle.net/PLfLW/1704/

Die Lösung verwendet ein zusätzliches festes div, das die Hälfte des Bildschirms ausfüllt. Da es behoben ist, bleibt es auch beim Scrollen der Benutzer in Position. Möglicherweise müssen Sie später mit einigen Z-Indizes arbeiten, um sicherzustellen, dass sich Ihre anderen Elemente über dem Hintergrund div befinden, es sollte jedoch nicht zu komplex sein.

Wenn Sie Probleme haben, vergewissern Sie sich, dass der Rest Ihres Inhalts einen höheren Z-Index als das Hintergrundelement hat, und Sie sollten sich darauf einstellen.


Moderne Browser

Wenn neuere Browser Ihre einzige Sorge sind, gibt es einige andere Methoden, die Sie verwenden können:

Linearer Verlauf:

Dies ist definitiv die einfachste Lösung. Sie können einen linearen Verlauf in der Hintergrundeigenschaft des Körpers für verschiedene Effekte verwenden.

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

Dies führt zu einem harten Cutoff von 50% für jede Farbe, daher gibt es keinen "Farbverlauf", wie der Name andeutet. Versuchen Sie, mit dem Stück "50%" des Stils zu experimentieren, um die verschiedenen Effekte zu sehen, die Sie erzielen können.

Beispiel: http://jsfiddle.net/v14m59pq/2/

Mehrere Hintergründe mit Hintergrundgröße:

Sie können dem html-Element eine Hintergrundfarbe zuweisen, anschließend ein Hintergrundbild auf das body-Element anwenden und die background-size-Eigenschaft verwenden, um es auf 50% der Seitenbreite festzulegen. Dies hat einen ähnlichen Effekt zur Folge, würde aber nur dann verwendet, wenn Sie ein oder zwei Bilder verwenden.

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

Beispiel: http://jsfiddle.net/6vhshyxg/2/


EXTRA HINWEIS: Beachten Sie, dass die beiden Elemente html und body in den letzten Beispielen auf height: 100% gesetzt sind. Damit stellen Sie sicher, dass der Hintergrund mindestens so groß ist, wie der Viewport des Benutzers, auch wenn Ihr Inhalt kleiner als die Seite ist. Ohne die explizite Höhe wird der Hintergrundeffekt nur bis zum Seiteninhalt reichen. Es ist im Allgemeinen auch nur eine gute Praxis.

209
justisb

Einfache Lösung, um einen "Zweiteilung" -Hintergrund zu erreichen:

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

Sie können Grad auch als Richtung verwenden

background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);
38
juniperi

Sie können eine harte Unterscheidung anstelle eines linearen Verlaufs treffen, indem Sie die zweite Farbe auf 0% setzen.

Zum Beispiel,

Farbverlauf - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

Harte Unterscheidung - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

15
akash

dies sollte mit pure css funktionieren.

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));

nur in Chrome getestet.

12
Michael

In einem früheren Projekt, das IE8 + unterstützen musste, habe ich dies mit einem im Daten-URL-Format codierten Bild erreicht.

Das Bild war 2800x1px, die Hälfte des Bildes war weiß und halbdurchsichtig.

body {
    /* 50% right white */
    background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;

   /* 50% left white */
   background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}

Sie können es hier sehen JsFiddle . Hoffe es kann jemandem helfen;)

9
Putuko

Dies ist also eine schrecklich alte Frage, die bereits eine akzeptierte Antwort hat, aber ich glaube, dass diese Antwort gewählt worden wäre, wenn sie vor vier Jahren veröffentlicht worden wäre.

Ich habe das rein mit CSS gelöst und mit NO EXTRA DOM ELEMENTS! Dies bedeutet, dass die beiden Farben nur das sind, nur Hintergrundfarben von EINEM ELEMENT, nicht die Hintergrundfarbe von zwei.

Ich habe einen Farbverlauf verwendet, und da ich die Farbstopps so eng aneinander gesetzt habe, sieht es so aus, als ob die Farben eindeutig sind und nicht überlappen.

Hier ist der Farbverlauf in nativer Syntax:

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

Die Farbe #74ABDD beginnt bei 0% und ist noch #74ABDD bei 49.9%.

Dann erzwinge ich, dass der Farbverlauf innerhalb von 0.2% der Elementhöhe zu meiner nächsten Farbe wechselt, wodurch eine scheinbar sehr feste Linie zwischen den beiden Farben entsteht.

Hier ist das Ergebnis:

Split Background Color

Und hier ist mein JSFiddle!

Habe Spaß!

9
WebWanderer

Ich habe :after verwendet und es funktioniert in allen gängigen Browsern. Bitte überprüfen Sie den Link. Ich muss nur auf den Z-Index achten, da die Position absolut ist.

<div class="splitBg">
    <div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
        </div>
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
        </div>
        <div style="clear:both;"></div>
    </div>
</div>`
css

    .splitBg{
        background-color:#666;
        position:relative;
        overflow:hidden;
        }
    .splitBg:after{
        width:50%;
        position:absolute;
        right:0;
        top:0;
        content:"";
        display:block;
        height:100%;
        background-color:#06F;
        z-index:1;
        }

Geigenverbindung

4
user1162084

Sie können den Pseudo-Selector :after verwenden, um dies zu erreichen, obwohl ich mir der Rückwärtskompatibilität dieses Selektors nicht sicher bin.

body {
    background: #000000
}
body:after {
    content:'';
    position: fixed;
    height: 100%;
    width: 50%;
    left: 50%;
    background: #116699
}

Ich habe dies verwendet, um zwei unterschiedliche Farbverläufe auf einem Seitenhintergrund zu haben.

2
Awaterujin

Die kugelsicherste und semantisch korrekte Option wäre die Verwendung von fest positionierten Pseudoelementen (:after oder :before). Vergessen Sie bei dieser Technik nicht, z-index auf Elemente im Container zu setzen. Beachten Sie auch, dass die content:""-Regel für ein Pseudoelement erforderlich ist. Andernfalls wird es nicht gerendert.

#container {...}

#content:before {
    content:"";
    background-color: #999;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;    
    width: 50%; 
    z-index: 1;
}


#content * {
  position: relative;
  z-index:2;
}

Live-Beispiel: https://jsfiddle.net/xraymutation/pwz7t6we/16/

2

Eine Möglichkeit, Ihr Problem zu implementieren, um eine einzige Zeile in Ihrem Div einzugeben:

background-image: linear-gradient(90deg, black 50%, blue 50%);

Hier finden Sie einen Demonstrationscode und weitere Optionen (horizontal, diagonal usw.). Klicken Sie auf "Code-Snippet ausführen", um den Code live zu sehen.

.abWhiteAndBlack
{
  background-image: linear-gradient(90deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack2
{
  background-image: linear-gradient(180deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack3
{
  background-image: linear-gradient(45deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}
Vertical:

  <div class="abWhiteAndBlack">
  </div>


Horizonal:

  <div class="abWhiteAndBlack2">
    
  </div>


Diagonal:

  <div class="abWhiteAndBlack3">
    
  </div>

1
Nadav

Verwenden Sie für Ihr Bild bg

Vertikale Aufteilung

background-size: 50% 100%

Horizontale Aufteilung

background-size: 100% 50%

Beispiel

.class {
   background-image: url("");
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: 50% 100%;
}
1
Jan Ranostaj

Dies ist ein Beispiel, das mit den meisten Browsern funktioniert.
Grundsätzlich verwenden Sie zwei Hintergrundfarben, die erste beginnt bei 0% und endet bei 50% und die zweite bei 51% und endet bei 100%.

Ich verwende die horizontale Ausrichtung:

background: #000000;
background: -moz-linear-gradient(left,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );

Für verschiedene Anpassungen können Sie http://www.colorzilla.com/gradient-editor/ verwenden.

0
Sorin Haidau