Как размыть фон каждого элемента изображения в галерее? (Конкретный)

Question

Я использую Light Gallery (http://sachinchoolur.github.io/lightGallery) для своего сайта и хочу сделать некоторые настройки на нем. Я хочу размыть фоновое изображение всех элементов изображения, которые открываются в галерее, используя эти изображения в их фоновом изображении (в CSS). Ну, в галерее Light гораздо больше ссылок на Java Script из атрибутов тегов html, чтобы просмотреть значения в галерее, что немного сложно для кого-то вроде того, кто не доминирует на JS. Структура галереи элементов выглядит следующим образом:

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

Если я размыть фон-изображение (Li) тега в CSS, это влияет эскизы (не галерея миниатюр). Я нашел основной контейнер-контейнер галереи (.lg-backdrop), который может размыть фон моей светлой галереи, но это «класс», и эффекты применяются ко всем элементам, определенным этим классом. и его мой 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 }

Вот я спрашиваю, есть ли способ, чтобы размыть фон каждого элемента изображения по своему образу и подобию?

Answer 1

Свойство CSS-фильтра обеспечивает доступ к эффектам, таким как размытие или смещение цвета на визуализации элемента до отображения элемента. Фильтры обычно используются для настройки рендеринга изображения, фона или границы.

Синтаксис является:

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