Ciao, non è molto chiara la situazione.
Trattandosi di un'immagine png (che di fatto supporta il livello di trasparenza) potresti applicare tale sfumatura direttamente sul file di origine usando qualche funzione di PS, come tu stesso dici. Questa sarebbe la soluzione più pratica ed ortodossa.
Con CSS non puoi, attualmente, applicare un effetto sfumato solo sui bordi dell'immagine. Al massimo, puoi applicare una sfumatura uniforme su tutta l'immagine attraverso la funzione blur() relativa alla proprietà filter.
Esempio:
codice:
img{
filter: blur(10px);
}
Probabilmente non soddisfa la tua richiesta ed inoltre c'è da dire che questi effetti, attualmente, non hanno il pieno supporto dei vari browser.
Ad ogni modo potresti adoperare altre soluzione. Fammi però capire se la tua immagine è un'immagine multicolore (diciamo così) o se si tratta solo di un immagine a tinta unita. Il mio dubbio è che, con tale immagine, tu voglia semplicemente creare uno sfondo semi trasparente ma comunque uniforme (a tinta unita). Se così fosse non ti servirebbe nemmeno utilizzare un'immagine ma basterebbe usare un div, impostandone opacity ed eventualmente usando la proprietà box-shadow per creare l'effetto sfumato.
Se invece vuoi usare proprio un'immagine, nel caso in cui lo sfondo abbia comunque un colore a tinta unita, potresti usare sempre box-shadow impostandogli lo stesso colore di sfondo e applicandogli l'opzione inset. Devi comunque fare un po' di macchinazioni:
Un esempio concreto:
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<style type="text/css">
body{
background: #012;
}
.sfumato{
position: relative;
display: inline-block;
line-height: 0;
}
.sfumato:before{
content: '';
position: absolute;
top:0;right:0;bottom:0;left:0;
box-shadow: 0 0 50px 50px #012 inset;
}
</style>
</head>
<body>
<div class="sfumato" ><img src="tua_immagine.png" alt="" ></div>
</body>
</html>
In questo caso, l'effetto di sfumatura tra il bordo dell'immagine e lo sfondo è solo illusorio perché la sfumatura non implica la trasparenza dell'immagine sul suo bordo ma vira semplicemente sul colore applicato allo sfondo.
Questo è ciò che mi è venuto in mente ma potrebbero benissimo esserci altre soluzioni.
Rispondi quotando
, risulta molto macchinoso il riuscire a trovare la stessa tonalità dello sfondo e non discostarsi da quella dell'immagine.