it-swarm-pt.tech

CSS: Defina uma cor de fundo que seja 50% da largura da janela

Tentando obter um plano de fundo em uma página que é "dividida em dois"; duas cores em lados opostos (aparentemente feitas definindo um background-color padrão na tag body e, em seguida, aplicando outra em uma div que estica a largura inteira da janela).

Eu encontrei uma solução, mas infelizmente a propriedade background-size não funciona no IE7/8, que é uma obrigação para este projeto -

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

Já que é apenas sobre cores sólidas, talvez exista uma maneira de usar apenas a propriedade background-color comum?

106
Staffan Estberg

Suporte para navegadores mais antigos

Se o suporte a navegadores mais antigos é uma obrigação, então você não pode ir com vários planos de fundo ou gradientes, você provavelmente vai querer fazer algo assim em um elemento sobressalente div:

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

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

A solução usa um div fixo extra que preenche metade da tela. Como está consertado, ele permanecerá em posição mesmo quando os usuários rolarem. Você pode ter que mexer com alguns z-indexes mais tarde, para ter certeza de que seus outros elementos estão acima do div do background, mas não deve ser muito complexo.

Se você tiver problemas, apenas certifique-se de que o resto do seu conteúdo tenha um z-index maior que o elemento de segundo plano e você deve estar pronto.


Navegadores Modernos

Se os navegadores mais recentes forem sua única preocupação, existem alguns outros métodos que você pode usar:

Gradiente linear:

Esta é definitivamente a solução mais fácil. Você pode usar um gradiente linear na propriedade background do corpo para uma variedade de efeitos.

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

Isso causa um corte de 50% para cada cor, então não há um "gradiente" como o nome indica. Tente experimentar a parte "50%" do estilo para ver os diferentes efeitos que você pode alcançar.

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

Vários planos de fundo com tamanho de plano de fundo:

Você pode aplicar uma cor de plano de fundo ao elemento html e, em seguida, aplicar uma imagem de plano de fundo ao elemento body e usar a propriedade background-size para defini-la como 50% da largura da página. Isso resulta em um efeito similar, embora seja realmente usado apenas em gradientes se você estiver usando uma imagem ou duas.

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

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


EXTRA NOTA: Observe que os elementos html e body estão definidos como height: 100% nos últimos exemplos. Isso é para garantir que, mesmo que seu conteúdo seja menor que a página, o plano de fundo terá pelo menos a altura da viewport do usuário. Sem a altura explícita, o efeito de plano de fundo será reduzido até o conteúdo da sua página. Também é apenas uma boa prática em geral.

209
justisb

Solução simples para alcançar "dividida em dois" de fundo:

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

Você também pode usar graus como direção

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

isso deve funcionar com CSS puro.

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

testado apenas no Chrome.

12
Michael

Você pode fazer uma distinção difícil em vez de gradiente linear colocando a segunda cor em 0%

Por exemplo,

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

Distinção difícil - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

11
akash

Em um projeto passado que tinha que suportar o IE8 + e consegui isso usando uma imagem codificada em formato de URL de dados.

A imagem era 2800x1px, metade da imagem branca e metade transparente. Funcionou muito bem.

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

Você pode vê-lo funcionando aqui JsFiddle . Espero que possa ajudar alguém;)

9
Putuko

Então, essa é uma pergunta muito antiga que já tem uma resposta aceita, mas acredito que essa resposta teria sido escolhida se tivesse sido publicada há quatro anos.

Eu resolvi isso puramente com CSS, e com NO EXTRA DOM ELEMENTS! Isso significa que as duas cores são puramente isso, apenas cores de fundo de ONE ELEMENT, não a cor de fundo de dois.

Eu usei um gradiente e, como defini a cor tão próxima, parece que as cores são distintas e não se misturam.

Aqui está o gradiente na sintaxe nativa:

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

A cor #74ABDD começa em 0% e ainda é #74ABDD em 49.9%.

Então, forço o gradiente a mudar para a próxima cor dentro de 0.2% da altura dos elementos, criando o que parece ser uma linha muito sólida entre as duas cores.

Aqui está o resultado:

Split Background Color

E aqui está meu JSFiddle!

Diverta-se!

9
WebWanderer

Eu usei :after e está funcionando em todos os principais navegadores. por favor, verifique o link. só precisa ter cuidado com o z-index como depois de ter posição absoluta.

<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 de violino

4
user1162084

Você poderia usar o pseudo-seletor :after para conseguir isso, embora não tenha certeza da compatibilidade com versões anteriores desse seletor.

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

Eu usei isso para ter dois gradientes diferentes em um plano de fundo da página.

2
Awaterujin

A opção mais à prova de balas e semanticamente correta seria usar o pseudoelemento de posição fixa (:after ou :before). Usando essa técnica, não esqueça de configurar z-index para os elementos dentro do container. Lembre-se também que a regra content:"" para o pseudo-elemento é necessária, caso contrário, ela não será renderizada.

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

Exemplo ao vivo: https://jsfiddle.net/xraymutation/pwz7t6we/16/

2
Arkadiusz Lendzian

Uma das formas de implementar seu problema é inserir uma única linha dentro de sua div:

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

Aqui está um código de demonstração e mais opções (horizontal, diagonal, etc.), você pode clicar em "Run snippet code" para vê-lo ao vivo.

.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

Use na sua imagem bg

divisão vertical

background-size: 50% 100%

Divisão horizontal

background-size: 100% 50%

Exemplo

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

Este é um exemplo que funcionará na maioria dos navegadores.
Basicamente você usa duas cores de fundo, a primeira a partir de 0% e terminando em 50% e a segunda começando em 51% e terminando em 100%.

Eu estou usando orientação horizontal:

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

Para diferentes ajustes, você pode usar http://www.colorzilla.com/gradient-editor/

0
Sorin Haidau