CSS: imposta un colore di sfondo che corrisponde al 50% della larghezza della finestra

Cercando di ottenere uno sfondo su una pagina che è “divisa in due”; due colors su lati opposti (apparentemente fatti impostando un background-color predefinito sul tag del body , quindi applicando un altro su un div che allunga l’intera larghezza della finestra).

Ho trovato una soluzione, ma sfortunatamente la proprietà background-size non funziona in IE7 / 8 che è un must per questo progetto –

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

Dato che si tratta solo di colors a tinta unita, forse esiste un modo per utilizzare solo la normale proprietà background-color ?

Supporto browser obsoleto

Se il supporto del browser più vecchio è un must, quindi non puoi andare con più sfondi o gradienti, probabilmente vorrai fare qualcosa di simile su un elemento div spare:

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

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

La soluzione utilizza un div fisso fisso che riempie la metà dello schermo. Poiché è stato risolto, rimarrà in posizione anche quando gli utenti scorreranno. Potresti dover armeggiare con alcuni z-index in seguito, per assicurarti che gli altri tuoi elementi siano sopra il div dello sfondo, ma non dovrebbe essere troppo complesso.

Se hai problemi, assicurati che il resto del tuo contenuto abbia un indice z più alto dell’elemento di sfondo e dovresti essere pronto.


Browser moderni

Se i nuovi browser sono la tua unica preoccupazione, ci sono un paio di altri metodi che puoi usare:

Gradiente lineare:

Questa è sicuramente la soluzione più semplice. Puoi usare un gradiente lineare nella proprietà di sfondo del corpo per una varietà di effetti.

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

Ciò causa un taglio netto al 50% per ciascun colore, quindi non esiste un “gradiente” come suggerisce il nome. Prova a sperimentare con il pezzo “50%” dello stile per vedere i diversi effetti che puoi ottenere.

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

Più sfondi con sfondo:

È ansible applicare un colore di sfondo all’elemento html e quindi applicare un’immagine di sfondo all’elemento body e utilizzare la proprietà background-size per impostarlo al 50% della larghezza della pagina. Ciò si traduce in un effetto simile, anche se verrebbe utilizzato solo su gradienti se si utilizza un’immagine o due.

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

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


NOTA EXTRA: si noti che sia gli elementi html che quelli body sono impostati in height: 100% negli ultimi esempi. Questo per assicurarsi che anche se il tuo contenuto è più piccolo della pagina, lo sfondo sarà almeno all’altezza della finestra dell’utente. Senza l’altezza esplicita, l’effetto di sfondo scenderà solo fino al contenuto della pagina. È anche solo una buona pratica in generale.

Soluzione semplice per ottenere uno sfondo “diviso in due”:

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

Puoi anche usare i gradi come direzione

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

questo dovrebbe funzionare con puro css.

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

testato solo in Chrome.

In un progetto passato che doveva supportare IE8 + e ho raggiunto questo objective utilizzando un’immagine codificata in formato data-url.

L’immagine era 2800x1px, metà dell’immagine bianca e metà trasparente. Ha funzionato abbastanza bene.

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

Puoi vederlo lavorare qui JsFiddle . Spero che possa aiutare qualcuno;)

Quindi, questa è una domanda terribilmente vecchia che ha già una risposta accettata, ma credo che questa risposta sarebbe stata scelta se fosse stata pubblicata quattro anni fa.

L’ho risolto solo con i CSS e con NESSUN ELEMENTO DOM EXTRA! Ciò significa che i due colors sono puramente quelli, solo i colors di sfondo di ONE ELEMENT, non il colore di sfondo di due.

Ho usato un gradiente e, poiché ho fissato il colore in modo così ravvicinato, sembra che i colors siano distinti e che non si fondano.

Ecco il gradiente nella syntax nativa:

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

Colore #74ABDD inizia allo 0% ed è ancora #74ABDD al 49.9% .

Quindi, imposto al gradiente di passare al mio prossimo colore entro lo 0.2% dell’altezza degli elementi, creando quella che sembra una linea molto solida tra i due colors.

Ecco il risultato:

Colore di sfondo diviso

Ed ecco il mio JSFiddle!

Divertiti!

Puoi fare una distinzione difficile invece del gradiente lineare mettendo il secondo colore a 0%

Per esempio,

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

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

Ho usato :after e funziona su tutti i principali browser. per favore controlla il link solo bisogno di fare attenzione per lo z-index come dopo aver avuto la posizione assoluta.

 
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.
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,
` 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; }

collegamento di violino

È ansible utilizzare lo pseudo-selettore :after per ottenere ciò, anche se non sono sicuro della compatibilità con le versioni precedenti di tale selettore.

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

Ho usato questo per avere due diversi gradienti su uno sfondo di pagina.

L’opzione più a prova di proiettile e semanticamente corretta sarebbe quella di usare uno pseudo-elemento a posizione fissa ( :after o :before ). Usando questa tecnica non dimenticare di impostare z-index elementi all’interno del contenitore. Inoltre, mente, quel content:"" è necessaria la regola per lo pseudo-elemento, altrimenti non verrà visualizzato.

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

Esempio dal vivo: https://jsfiddle.net/xraymutation/pwz7t6we/16/

Usa sulla tua immagine bg

Divisione verticale

 background-size: 50% 100% 

Divisione orizzontale

 background-size: 100% 50% 

Esempio

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

Uno dei modi per implementare il tuo problema per inserire una singola riga all’interno del tuo div:

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

Ecco un codice dimostrativo e più opzioni (orizzontale, diagonale, ecc.), Puoi fare clic su “Esegui snippet di codice” per vederlo dal 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: 
Horizonal:
Diagonal:

Questo è un esempio che funzionerà sulla maggior parte dei browser.
Fondamentalmente si usano due colors di sfondo, il primo a partire dallo 0% e termina al 50% e il secondo a partire dal 51% e termina al 100%

Sto usando l’orientamento orizzontale:

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

Per diversi aggiustamenti è ansible utilizzare http://www.colorzilla.com/gradient-editor/