如何模糊光库中每个图像项的背景？ （特定）

Question

我将Light Gallery（http://sachinchoolur.github.io/lightGallery）用于我的网站，并希望对其进行一些自定义。 我想通过在背景图像中使用这些图像（在CSS中）来模糊在库中打开的每个图像项的背景图像。 好吧，Light gallery使用更多来自html标签属性的Java Script引用来查看库中的值，这对于那些在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滤镜属性可在元素显示之前访问元素渲染上的模糊或色移等效果。过滤器通常用于调整图像，背景或边框的渲染。

语法是：

IDictionary<DateTime, ICollection<Action_t>> actions = new SortedDictionary<DateTime, ICollection<Action_t>>();
void AddAction(DateTime key, Action_t action)
{
    ICollection<Action_t> values;
    if (!actions.TryGetValue(key, out values))
    {
        values = new List<Action_t>();
        actions[key] = values;
    }
    values.Add(action);
}