Dissolvenza dell'immagine in trasparenza come in un gradiente

Mi piacerebbe avere un'immagine (un'immagine di sfondo) che sfuma in trasparenza in modo che il contenuto dietro di esso possa effettivamente essere visto (a malapena, grazie alla trasparenza).Dissolvenza dell'immagine in trasparenza come in un gradiente

Posso ottenerlo ovviamente con un'immagine PNG, ma ho bisogno di chiedere al mio grafico di cambiare l'immagine ogni volta che voglio cambiare l'inizio => fermare i punti di trasparenza (forse voglio più colore o forse voglio meno colore e più trasparenza).

C'è qualche possibilità che io possa ottenere lo stesso effetto con CSS3? Ho provato ad applicare un gradiente a trasparente su un jpg (e un png) ma non riesco a vedere attraverso di esso a meno che il PNG abbia già la trasparenza (e fondamentalmente il gradiente) già fatto (il che rende il gradiente css inutile).

Qualche suggerimento? Sto scavando duro attraverso il web ma sembra che non sto usando la parola chiave giusta o forse non è possibile.

Update 1:

Codice dice più di molte parole, vorrei fare qualcosa di simile (ma la sintassi è ovviamente sbagliato):

background: linear-gradient(to bottom, rgba(url('splash_bottom3.png'), 0.0), rgba(url('splash_bottom3.png'), 1.0));

fonte

2013-10-31 Fire-Dragon-DoL

È necessario cercare "mascheramento". Però è necessario farlo funzionare cross-browser. – vals

Ohhh, il tuo suggerimento è davvero buono, non stavo cercando la parola chiave giusta come sembra. Ok, sto controllando un po 'il web, sto bene supportando solo IE10 +/chrome ultima versione/firefox ultima versione. Se ho problemi con quelli, ovviamente non posso usarlo. –

riscrittura completa della mia risposta precedente, perché ho apparentemente e totalmente frainteso la domanda.

Se si desidera che questo:

enter image description here

si può fare questo:

<html> 
 
    <style type='text/css'> 
 
    div, img { position:absolute; top:0; left:0; width:250px; height:250px; } 
 
    img { 
 
     -webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))) 
 
    } 
 
    </style> 
 
    <body> 
 
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet porttitor massa. Morbi eget tortor congue, aliquet odio a, viverra metus. Ut cursus enim eu felis sollicitudin, vitae eleifend urna lobortis. Mauris elementum erat non facilisis cursus. Fusce sit amet lacus dictum, porta libero sed, euismod tellus. Aenean erat augue, sodales sed gravida ac, imperdiet ac augue. Ut condimentum dictum mauris. Donec tincidunt enim a massa molestie, vel volutpat massa dictum. Donec semper odio vitae adipiscing lacinia.</div> 
 
    <img src='http://verysmartbrothas.com/images/random.jpg?9fe95b' /> 
 
    </body> 
 
</html>

Update 1

Se vuoi farlo in altri browser, non sarà così facile. Firefox ha bisogno di un SVG e IE ha bisogno di un sacco di cose da fare.

fonte

2013-10-31 18:51:07 bishop

Sì, ma in questo modo l'immagine non sarà trasparente, sbaglio? Quindi se ho del testo DIETRO il div #under, non riesco a vederlo attraverso l'immagine. Stavo testando qualcosa di simile a questo in precedenza. –

Corretto, l'immagine non sarà trasparente. Se hai il testo dietro #under sarà coperto (assumendo l'ordine di impilamento naturale). Puoi andare in giro con z-index. Sto postando un aggiornamento nella mia risposta. – bishop

Il problema è che ho bisogno che il testo svanisca dietro l'immagine, questo è il mio scopo principale. –

Se si desidera solo a svanire per il colore di sfondo (bianco, in questo caso) si veda l'esempio di lavoro qui:

http://jsfiddle.net/yw9v7zm5/

css per il div contenitore di immagine utilizza:

background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%); 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(80%,rgba(255,255,255,1))); 
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); 
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); 
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); 
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 80%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0);

fonte

2015-04-06 04:00:24

Questa soluzione sta funzionando su IE/FF/Chrome/Safari che potrei provare usando BrowserStack! – ZedTuX

Dissolvenza dell'immagine in trasparenza come in un gradiente

risposta

Problemi correlati