CSS: Ustaw kolor tła na 50% szerokości okna


155

Próba uzyskania tła strony, które jest „podzielone na dwie części”; dwa kolory po przeciwnych stronach (pozornie zrobione przez ustawienie wartości domyślnej background-colorna bodytagu, a następnie nałożenie innego na element, divktóry rozciąga się na całą szerokość okna).

Wymyśliłem rozwiązanie, ale niestety background-sizewłaściwość nie działa w IE7 / 8, co jest koniecznością dla tego projektu -

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

Ponieważ chodzi tylko o jednolite kolory, może istnieje sposób na użycie tylko zwykłej background-colorwłaściwości?

Odpowiedzi:


280

Obsługa starszych przeglądarek

Jeśli obsługa starszych przeglądarek jest koniecznością, więc nie możesz przejść z wieloma tłami lub gradientami, prawdopodobnie będziesz chciał zrobić coś takiego na wolnym divelemencie:

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

Przykład: http://jsfiddle.net/PLfLW/1704/

Rozwiązanie wykorzystuje dodatkowy stały element div, który wypełnia połowę ekranu. Ponieważ jest naprawiony, pozostanie na miejscu nawet podczas przewijania przez użytkowników. Być może będziesz musiał później majstrować przy niektórych indeksach Z, aby upewnić się, że inne elementy znajdują się powyżej elementu div tła, ale nie powinno to być zbyt skomplikowane.

Jeśli masz problemy, po prostu upewnij się, że reszta treści ma indeks Z wyższy niż element tła i powinieneś być gotowy.


Nowoczesne przeglądarki

Jeśli zależy Ci tylko na nowszych przeglądarkach, możesz skorzystać z kilku innych metod:

Gradient liniowy:

To zdecydowanie najłatwiejsze rozwiązanie. Możesz użyć gradientu liniowego we właściwości background ciała, aby uzyskać różne efekty.

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

Powoduje to twarde odcięcie na poziomie 50% dla każdego koloru, więc nie ma „gradientu”, jak sugeruje nazwa. Spróbuj poeksperymentować z „50%” elementem stylu, aby zobaczyć różne efekty, które możesz osiągnąć.

Przykład: http://jsfiddle.net/v14m59pq/2/

Wiele tła z rozmiarem tła:

Możesz zastosować kolor tła do htmlelementu, a następnie zastosować obraz tła do bodyelementu i użyć background-sizewłaściwości, aby ustawić go na 50% szerokości strony. Daje to podobny efekt, chociaż tak naprawdę będzie używany tylko w przypadku gradientów, jeśli używasz jednego lub dwóch obrazów.

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;
}

Przykład: http://jsfiddle.net/6vhshyxg/2/


DODATKOWA UWAGA: Zauważ, że oba elementy htmli bodysą ustawione na height: 100%w ostatnich przykładach. Ma to na celu upewnienie się, że nawet jeśli treść jest mniejsza niż strona, tło będzie miało co najmniej wysokość obszaru roboczego użytkownika. Bez wyraźnej wysokości efekt tła spadnie tylko do zawartości strony. To także ogólnie dobra praktyka.


Dzięki, pomogło mi to osiągnąć taki efekt na stole: jsfiddle.net/c9kp2pde

11
linear-gradientCiężko odcięcia działa również dla pikseli:background: linear-gradient(90deg, #FFC0CB 225px, #00FFFF 0, #00FFFF 100%);
Jacob van Lingen

1
działa z 50% 50%, ale nie działa, gdy zamieniam na 25% 75%
datdinhquoc

5
@datdinhquoc Try background: linear-gradient(90deg, #FFC0CB 25%, #00FFFF 0);.
justisb

55

Proste rozwiązanie pozwalające uzyskać tło „podzielone na dwa”:

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

Możesz również użyć stopni jako kierunku

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

14
To jest fajne, ale to gradient. Czy można dokonać trudnego rozróżnienia?
John Giotta,

23

Możesz dokonać trudnego rozróżnienia zamiast liniowego gradientu, ustawiając drugi kolor na 0%

Na przykład,

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

Trudne wyróżnienie - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);


17

Jest to więc okropnie stare pytanie, na które już została zaakceptowana odpowiedź, ale uważam, że ta odpowiedź zostałaby wybrana, gdyby została opublikowana cztery lata temu.

Rozwiązałem to wyłącznie za pomocą CSS i BEZ DODATKOWYCH ELEMENTÓW DOM! Oznacza to, że te dwa kolory to po prostu kolory tła JEDNEGO ELEMENTU, a nie kolor tła dwóch.

Użyłem gradientu i ponieważ ustawiłem stopnie kolorów tak blisko siebie, wygląda na to, że kolory są wyraźne i nie mieszają się.

Oto gradient w natywnej składni:

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

Kolor #74ABDDzaczyna się 0%i jest nadal #74ABDDna 49.9%.

Następnie wymuszam przesunięcie gradientu na mój następny kolor w 0.2%obrębie wysokości elementów, tworząc coś, co wydaje się być bardzo ciągłą linią między dwoma kolorami.

Oto wynik:

Podziel kolor tła

A oto mój JSFiddle!

Baw się dobrze!


Można nawet iść z pikselami na to. background: repeating-linear-gradient(var(--grayLight), var(--grayLight) 430px, rgba(0,0,0,0) 201px, rgba(0,0,0,0) 100%);
Philip

12

powinno to działać z czystym CSS.

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

testowane tylko w Chrome.


9

W poprzednim projekcie, który musiał obsługiwać IE8 + i osiągnąłem to za pomocą obrazu zakodowanego w formacie adresu URL danych.

Obraz miał rozmiar 2800x1px, połowa obrazu była biała, a połowa przezroczysta. Działało całkiem dobrze.

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;
}

Możesz zobaczyć, jak działa tutaj JsFiddle . Mam nadzieję, że to może komuś pomóc;)


4

Używałem :afteri działa we wszystkich głównych przeglądarkach. proszę sprawdzić link. po prostu trzeba uważać na indeks z, ponieważ po ma pozycję bezwzględną.

<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;
        }

link skrzypcowy


3

Możesz użyć :afterpseudo-selektora, aby to osiągnąć, chociaż nie jestem pewien, czy ten selektor jest kompatybilny wstecz.

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

Użyłem tego, aby mieć dwa różne gradienty na tle strony.


1
Ta technika jest obsługiwana we wszystkich przeglądarkach, świetne rozwiązanie! Możesz również użyć pozycji bezwzględnej z względnym rodzicem, jeśli nie chcesz uzyskać stałego efektu.
Adam T. Smith

3

Użyj na swoim obrazie bg

Podział pionowy

background-size: 50% 100%

Podział poziomy

background-size: 100% 50%

Przykład

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

jak ustawić to tło na środku
Vaibhav Ahalpara

1
spróbuj: background-position: center center
Jan Ranostaj

3

Jednym ze sposobów zaimplementowania problemu, aby wprowadzić jeden wiersz w swoim div:

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

Oto kod demonstracyjny i więcej opcji (pozioma, ukośna itp.). Możesz kliknąć „Uruchom fragment kodu”, aby zobaczyć go na żywo.

.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>


2

Najbardziej kuloodporną i poprawną semantycznie opcją byłoby użycie pseudoelementu o stałej pozycji ( ::afterlub ::before). Korzystając z tej techniki nie zapomnij ustawić z-indexelementów wewnątrz kontenera. Pamiętaj też, że ta content:""reguła dla pseudoelementu jest potrzebna, w przeciwnym razie nie zostanie renderowana.

#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;
}

Przykład na żywo: https://jsfiddle.net/xraymutation/pwz7t6we/16/


1

.background{
 background: -webkit-linear-gradient(top, #2897e0 40%, #F1F1F1 40%);
 height:200px;
 
}

.background2{
  background: -webkit-linear-gradient(right, #2897e0 50%, #28e09c 50%);

 height:200px;
 
}
<html>
<body class="one">

<div class="background">
</div>
<div class="background2">
</div>
</body>
</html>


0

To jest przykład, który będzie działał na większości przeglądarek.
Zasadniczo używasz dwóch kolorów tła, pierwszy zaczyna się od 0% i kończy na 50%, a drugi zaczyna się od 51% i kończy na 100%

Używam orientacji poziomej:

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 );

Do różnych ustawień możesz użyć http://www.colorzilla.com/gradient-editor/


0

jeśli chcesz używać linear-gradientz 50% wysokości:

background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.