Usando i CSS, puoi applicare una maschera gradiente per dissolvere lo sfondo sul testo?

Ho un'immagine di sfondo fissa a schermo intero. Vorrei che il testo nel mio div di scorrimento si dissolvesse in alto, presumibilmente applicando una maschera gradiente allo sfondo solo nella parte superiore del div. Sono interessato ad avere il testo che sembra svanire mentre l'utente scorre verso il basso, ma ha ancora un'ampia area di completa opacità per la lettura effettiva del testo.Usando i CSS, puoi applicare una maschera gradiente per dissolvere lo sfondo sul testo?

So che ci sono opzioni di mascheramento del WebKit, ma non riesco a trovare un modo per sfumare fino al fondo della pagina sopra il testo contenuto applicando solo il gradiente di una piccola porzione di un elemento.

Spero di essere stato abbastanza descrittivo.

Grazie.

fonte

2012-03-01 aviemet

leggere questo e seguire totorial: http://webdesignerwall.com/tutorials/css-gradient-text-effect –

Grazie, l'ho visto prima che l'ho postato, e funzionerebbe se volessi solo sfumare in bianco, ma voglio sfumare sullo sfondo dell'immagine della pagina . – aviemet

Mi stavo chiedendo esattamente la stessa cosa. La soluzione è in realtà abbastanza semplice. Anche se questa è ovviamente una caratteristica CSS3 moderna, quindi sei bloccato alla compatibilità del browser.

Webkit può prendersi cura di questo con una sola riga di CSS:

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

Questo sarebbe fade out il fondo il 10% di qualsiasi elemento è applicato a, senza usare nemmeno tanto come un'immagine. Puoi aggiungere padding-bottom: 10% per assicurarti che il contenuto sia sbiadito solo quando c'è più di cui scorrere. Fonte: http://www.webkit.org/blog/181/css-masks/

A Mozilla (Gecko) fallback è un po 'più complicato però: è possibile utilizzare its 'mask' feature, ma questo richiede uno SVG-immagine. Si potrebbe provare a base64 embed that image into your stylesheet ...

fonte

2012-03-12 16:24:10

+22

Obbligatorio - http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies: P – BoltClock

Buon articolo, grazie per quello. –

Grazie mille, era esattamente quello di cui avevo bisogno! –

Supponendo di capire cosa si desidera correttamente, è possibile duplicare i primi 300ish pixel dell'immagine e applicare a essi un gradiente di trasparenza in Photoshop (rendendo la parte superiore completamente opaca e la parte inferiore completamente trasparente).

Quindi posizionare questa immagine in un div o qualche altro elemento fisso nella parte superiore dell'immagine fissa ma con un valore alto z-index. Il testo principale dovrebbe quindi scorrere sullo sfondo ma sotto la sovrapposizione di div e sfumare mentre la sovrapposizione diventa più opaca verso la parte superiore dello schermo.

fonte

2012-03-01 22:48:36 Gareth

Questa sarebbe una buona soluzione, tranne per il fatto che pongo una priorità più alta sullo sfondo della pagina intera adattandola alle dimensioni della finestra. Speravo ancora di applicare una maschera che avrebbe influito sull'elemento a cui l'ho applicato e su tutto ciò che conteneva, incluso il testo. – aviemet

Se stai dissolvenza ad un colore solido, è possibile utilizzare un elemento psudo:

.image-container { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 

 
.image-container:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 55%; 
 
    bottom: 0; 
 
    background: -webkit-linear-gradient(transparent, #FFF) left repeat; 
 
    background: linear-gradient(transparent, #FFF) left repeat; 
 
}

<div class="image-container"> 
 
    <img src="https://photosharingsites.files.wordpress.com/2014/11/tiger-wild-cat-animal-winter-snow-wallpapers-free-backgrounds.jpg?w=474&h=344" alt="don't shoot me"> 
 
    </div>

fonte

2015-10-02 15:57:00 ecolema

Usando i CSS, puoi applicare una maschera gradiente per dissolvere lo sfondo sul testo?

risposta

Problemi correlati