2016-08-02 8 views
1

Bilder als Referenz:Wie wird dieser iTunes Album Art Blur-Effekt erzielt?

Blurred background 1

Blurred background 2

Von auf anderen Alben klicken um, scheint es, dass das Albumcover möglicherweise auf gezoomt wird und dann eine unscharfe Maske wird über oben angewendet? Weiß jemand, wie diese Art von Effekt erreicht wird? Es ist eine wirklich gut aussehende Unschärfe und Transparenz Kombination.

Antwort

1

Hier ist ein jsfiddle mit einem Beispiel:

(Die Spitze ist der Unschärfeeffekt und der Boden wird das Originalbild)

https://jsfiddle.net/LmyepLac/

Der Nutzanteil ist:

-webkit-filter: blur(20px); 
    -moz-filter: blur(20px); 
    -o-filter: blur(20px); 
    -ms-filter: blur(20px); 
    filter: blur(20px); 

Um einen Unschärfe-Effekt zu erstellen, kann von 20px zu Ihren Bedürfnissen ändern :)

+0

Bald werden die Header entfernt und Sie müssen nur 'filter' verwenden. – haykam

+0

Aktualisiertes Beispiel: https://jsfiddle.net/LmyepLac/1/ –

+0

@peanut ja das stimmt, danke :) –