Hintergrund-Farbe, 50% der einen Farbe und 50% einer anderen Farbe

Innerhalb eines div-ich möchte ein hintergrund-Farbe in den ersten 50% der Breite, und eine andere Farbe, die anderen 50% der Breite. Ideal Auf die Größe, die ich will, um Sie nahtlos ohne Artefakte oder nervös Effekte.

Idealerweise möchte ich vermeiden, mit anderen divs im code wie arbeite ich mit dem vorhandenen HTML-Code, der zu ändern ist schwer - wirklich auf der Suche für ein 100% CSS-Lösung.

Ich bin auf der Suche nach so etwas wie dieses (ich verspottet diese mit Feuerwerk):
Hintergrund-Farbe, 50% der einen Farbe und 50% einer anderen Farbe

InformationsquelleAutor fakeguybrushthreepwood | 2014-01-17
  1. 14

    können Sie so etwas wie, basiert aber upong die Browser, die Sie unterstützen muss, es funktioniert möglicherweise nicht auf alle von Ihnen.

    background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);
    InformationsquelleAutor hosker
  2. 6

    Können Sie verwenden :vor und :after pseudo-Elemente. 

    #somediv {
  width:50%;
  height:100px;
  position: relative;
}

#somediv:after, #somediv:before {
  content:' ';
  position: absolute;
  width:50%;
  height:100%;
  z-index: -1;
}

#somediv:after {left: 0px; background: #F00;  }
#somediv:before {right: 0px; background: #00F;}

    EDIT: wie so http://plnkr.co/edit/hm9bHNuuzh2EK4zwn3nr?p=preview

    Arbeitet aber auch im ie8, wo Verläufe nicht.

    lassen Sie mich wissen, wenn Sie diese brauchen, um mehr auf Ihre Bedürfnisse zugeschnitten.

    InformationsquelleAutor Matthew.Lothian
  3. 2

    Könnten Sie einen Farbverlauf, wie hier: http://jsfiddle.net/F3M5e/

    Relevante code:

    background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #1e5799 50%, #000000 50%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#1e5799), color-stop(50%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #1e5799 0%,#1e5799 50%,#000000 50%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #1e5799 0%,#1e5799 50%,#000000 50%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #1e5799 0%,#1e5799 50%,#000000 50%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom,  #1e5799 0%,#1e5799 50%,#000000 50%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

    Edit: horizontaler Verlauf http://jsfiddle.net/F3M5e/1/

    InformationsquelleAutor Achal Dave
  4. 2

    http://jsfiddle.net/Rn8PZ/

    div {
    background: -webkit-linear-gradient(right, tan 50%, green 50%);
    background: -o-linear-gradient(right, tan 50%, green 50%);
    background: -moz-linear-gradient(right, tan 50%, green 50%);
    background: linear-gradient(to right, tan 50%, green 50%);
}
    InformationsquelleAutor CRABOLO
Schreibe einen Kommentar