Come applicare l'effetto sfocatura all'immagine di sfondo in Blogger?

2015-02-25 javascript jquery html css blogger

Ho cercato di aggiungere l'effetto di sfocatura ai miei post, ma l'unica cosa che viene sfocata è il contenuto del post principale (foto: http://i.gyazo.com/9d94d2be5dc3f3ada982564aa212336e.jpg ). Qualche idea su come scegliere l'immagine di sfondo anziché il contenuto?

Il codice che sto usando al momento è:

<script type="text/javascript">
var image = document.querySelector('.post-body img').src;
var target = document.body;
target.style.backgroundImage = "url(" + image + ")";
target.style.backgroundSize = "cover";
document.body.style["background-attachment"] = "fixed";
</script>

Ho la strana sensazione che sia necessario trasformare l'immagine di sfondo reale in un elemento autonomo, ma non ho idea di come.

Inoltre, c'è la possibilità che io possa aggiungere Blur.js in blogger o è solo per Wordpress? Se si, mi piacerebbe sapere come?

Grazie in anticipo.

Answers

Puoi provare a usare questo tag CSS 3:

filter: blur(5px);

Puoi consultare la documentazione mdn qui: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Puoi farlo su Blogger senza usare JS o CSS.

  1. Carica la tua immagine in un post di Blogger come se volessi inserirla in un articolo.
  2. Copia l'URL dell'immagine e incollalo nel css del body modo:

    body {
        background-image: url('YOUR IMAGE URL HERE');
    }
    
  3. Sostituisci /s-1600/ parte /s1600-fcrop64=1,000f0000ffceffff:Soften=1,20,0/ con /s1600-fcrop64=1,000f0000ffceffff:Soften=1,20,0/

Nota: è possibile regolare il raggio della sfocatura sfogliando il secondo numero dopo Soften= (nel caso sopra, 20 ).

Il vantaggio di questo è che è più leggero sul codice e completamente compatibile con ogni dispositivo e browser in grado di caricare un'immagine!

Ho lavorato su questo e ho visto questa domanda. Quindi ecco un suggerimento.

<script type="text/javascript">

    function showBackground() {
        document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundImage = "url('http://backgroundImage.jpg')";
        document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundPosition = "center center";
        document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundRepeat = "no-repeat";
        document.getElementsByClassName('body-fauxcolumn-outer')[0].style.backgroundAttachment = "fixed";
        document.getElementsByClassName('body-fauxcolumn-outer')[0].style.webkitFilter = "blur(5px)";
    }

    window.onload = showBackground();


</script>

Spiegazione

Mentre utilizzavo il modello semplice in quel momento, ho notato che il modello standard ha una classe chiamata body-fauxcolumn-outer che viene utilizzata per impostare il colore di sfondo.

Quindi adeguo la mia risposta qui per rispondere a questa domanda.

Ho appena aggiunto quanto segue per correggere la sfocatura, come puoi vedere nell'immagine qui sotto.

document.getElementsByClassName('body-fauxcolumn-outer')[0].style.webkitFilter = "blur(15px)";

Immagine

Related