Gradiente CSS su più elementi

Question

Mi chiedevo se è possibile applicare un singolo sfondo gradiente CSS3 a più elementi. In altre parole, il gradiente si estende sull'elemento padre ma è visibile solo all'interno degli elementi figlio.

Al termine della ricerca, ho trovato questa discussione: Applying gradient over multiple views

Questo è esattamente il mio problema, anche se ne ho bisogno come CSS/HTML codice.

Per visualizzare il problema, ho fatto due foto:

Questa è l'impostazione di base. I due <div> s che necessitano di uno sfondo sfumato sono all'interno di un elemento più grande <div>.

Come si può vedere, il gradiente nella seconda immagine si dissolve in ottima posizione da elemento A all'elemento B. Questo effetto è facilmente fattibile nella maggior parte dei programmi di modifica delle immagini, quindi ho potuto solo usare un'immagine appropriata per ottenere l'effetto desiderato.

Tuttavia, poiché le immagini non sono probabilmente il modo migliore per risolvere questo problema, spero di trovare una risposta qui su come farlo con solo CSS. Ho usato gradienti prima, ma non ho ancora trovato una soluzione a questo problema da solo.

Qualsiasi aiuto è apprezzato.

MODIFICA (06/01/15 13:30 GMT + 1): Gli elementi A e B dovrebbero essere in grado di avere angoli arrotondati. Il gradiente di spanning doveva essere originariamente un radial-gradient, ma non è necessario. Forse il problema non è davvero risolvibile.

Answer 1

Demo:https://jsfiddle.net/andrewgu/gptbyejt/

Un modo per ottenere questo risultato è che si potrebbe sempre fingere con un colore solido background. Si visualizza il gradiente div sullo sfondo e qualsiasi contenuto div si desidera, separato con un overlaying div il cui colore corrisponde allo sfondo.

Pro: flessibili, compatibili

Contro: background colori solidi solo

---

L'altro modo è quello di utilizzare qualcosa chiamato CSS clipping. È possibile farlo utilizzando le dichiarazioni CSS di clip-path e -webkit-clip-path. Questo rende fondamentalmente parte di un elemento trasparente. Tuttavia, è necessario specificare la dimensione di ciascun elemento in anticipo e modificarlo un po 'per visualizzare correttamente gli elementi. Questo metodo funziona con sfondi non solidi. Contrariamente alla credenza popolare, il clipping CSS è abbastanza buono con la compatibilità cross-browser.

Pro: sfondi modellati, compatibili

Contro: definiti taglie bambino-elemento, tweaking

Answer 2

Combinazione di background-attachment: fixed e iframe può fare questo trucco per voi.
Controlla per nexts.github.io/Multiple.js e prestare attenzione a "Come funziona" sezione

Answer 3

(Anche se questo Qestion è abbastanza molto vecchio ...)

Dai un'occhiata alla Multiple.js - che descrive come applicare un gradiente su più elementi senza js.

Citato dalla pagina di configurazione:

.selector { 
    background-image: linear-gradient(white, black); 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; /* <- here it is */ 
    width: 100px; 
    height: 100px; 
} 

background-attachment: fixed espande sfondo a misura e display di viewport in ogni elemento pezzo del caso, esattamente ciò che è necessario!

L'idea alla base di questo è semplice come intelligente e funziona per i browser più moderni (anche IE8).

Se applicato lo assomiglia questo: