如何模糊光廊中每个图像项的背景？ （具体）

Question

我的网站使用 Light Gallery (http://sachinchoolur.github.io/lightGallery)，并想对其进行一些自定义。 我想通过在背景图像（CSS 中）中使用这些图像来模糊图库中打开的每个图像项目的背景图像。 好吧，Light gallery 使用更多来自 html 标签属性的 Java 脚本引用来查看画廊中的值，这对于不熟悉 JS 的人来说有点复杂。 画廊项目的结构如下所示：

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

如果我模糊 CSS 中 (li) 标签的背景图像，它会影响缩略图（不是图库缩略图）。 我找到了主画廊容器类（.lg-backdrop），它可以模糊我的灯光画廊的背景，但它是一个“类”，效果适用于该类定义的所有项目。 这是我的 CSS：

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

我在这里问是否有一种方法可以通过每个图像项自己的图像来模糊其背景？

Answer 1

CSS 过滤器属性提供了在显示元素之前对元素渲染的模糊或颜色偏移等效果的访问。滤镜通常用于调整图像、背景或边框的渲染。

语法是：

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

Answer 2

Lightgallery 可以在使用设置

addClass

初始化时添加类。

你可以这样做：

lightgallery(yourElement, {
    addClass: 'blured-image'
})

.blured-image img{
    filter: blur(50px);
}

添加类文档：https://www.lightgalleryjs.com/docs/settings/#lightgallery-core