Comment flouter l'arrière-plan de chaque élément d'image dans la galerie de lumière? (Spécifique)

Question

J'utilise Light Gallery (http://sachinchoolur.github.io/lightGallery) pour mon site et je souhaite effectuer une personnalisation à ce propos. Je souhaite estomper l'image d'arrière-plan de tous les éléments d'image qui s'ouvrent dans la galerie en utilisant ces images dans leur image d'arrière-plan (en CSS). Eh bien, la galerie Light utilise beaucoup plus de références Java Script à partir des attributs tag html pour voir les valeurs dans la galerie, ce qui est un peu compliqué pour quelqu'un qui ne prédomine pas sur JS. La structure des éléments de la galerie ressemble à ceci:

<ul id="lightgallery"> 
 
    <li> 
 
    <a href=""> 
 
     <img src=""> 
 
    </a> 
 
    </li> 
 
</ul>

Si je flou background-image (li) balise en CSS, il effectue les vignettes (non miniatures de la galerie). J'ai trouvé la classe de conteneur de galerie principale (.lg-backdrop) qui peut brouiller l'arrière-plan de ma galerie de lumière, mais c'est une "classe" et les effets s'appliquent à tous les éléments définis par cette classe. et son mon CSS:

.lg-backdrop:before { 
 
\t content: ""; 
 
\t position: fixed; 
 
\t left: 0; 
 
\t right: 0; 
 
\t z-index: -1; 
 
\t display: block; 
 
\t background-image: url(contents/images/canada/canada_exh_1.jpg); 
 
\t width:100%; 
 
\t height:100%; 
 
\t -webkit-filter: blur(50px); 
 
\t -moz-filter: blur(50px); 
 
\t -o-filter: blur(50px); 
 
\t -ms-filter: blur(50px); 
 
\t filter: blur(50px); 
 
\t }

Voici ce que je demande s'il y a un moyen de brouiller l'arrière-plan de chaque élément d'image par leur propre image?

Answer 1

La propriété Filtre CSS permet d'accéder à des effets tels que le flou ou le changement de couleur sur le rendu d'un élément avant l'affichage de l'élément. Les filtres sont généralement utilisés pour ajuster le rendu d'une image, d'un arrière-plan ou d'une bordure.

La syntaxe est:

.filter-me { 
    filter: <filter-function> [<filter-function>]* | none 
}