Question

首先，我要说清楚我已经搜索了一些解决方案。而且我也看到了一些模糊问题＆＃39;这里是stackoverflow。但我的情况略有不同。

我想模糊落在透明div元素后面的幻灯片部分。在我的测试服务器上，我有一个预览，使其可以理解，你可以检查它here。

我已经尝试过的事情： - blurjs.com - CSS only blur wich you can check here - 谷歌

这两个基本相同，两个解决方案都不支持改变背景。也许你们知道一个解决方案。

我希望你能帮助我。感谢。

我现在的代码：

<div id="blur-overlay"></div>
<div id="slideshow">
    <div class="slide active"><img src="http://www.zastavki.com/pictures/originals/2012/Space_Earth_from_space_035859_.jpg" alt="Slideshow Image 1" /></div>
    <div class="slide"><img src="http://www.zastavki.com/pictures/originals/2012/Space_Full_Moon_from_the_Earth_035858_.jpg" alt="Slideshow Image 2" /></div>
    <div class="slide"><img src="http://i.space.com/images/i/000/005/402/original/hubble-space-bubble-photo-2-100622-02.jpg?1292270748" alt="Slideshow Image 3" /></div>
</div>

和CSS：

#blur-overlay {
        width: 250px;
        height: 250px;
        border-radius: 100%;
        background: rgba(255, 255, 255, 0.5);
        position: absolute;
        top: 105px;
        left: 50%;
        margin-left: -125px;
        z-index: 100;
    }
    #slideshow {
        position:relative;
        height:300px;   
        width:1000px;
        float: left;
        overflow: hidden;
    }
    #slideshow .slide {
        position:absolute;
        top:0;
        left:0;
        z-index:8;
        opacity:0.0;
    }
    #slideshow div  {
        display: none;
    }
    #slideshow div img {
        width: 100%;
        float: left;
        position: relative;
    }
    #slideshow div.active {
        display: block;
        z-index:10;
        opacity:1.0;
    }
    #slideshow div.last-active {
        z-index:9;
    }

Answer 1

编辑：我误解了想要做的事情。海报希望模糊div背后的背景，而不是div本身。唯一的方法就是让图像的一部分模糊，这实际上也包含在文章中。另请参阅其他答案。

原件：

我认为这是不完全阅读文章的症状。这是一篇代码示例，直接来自文章（半透明框后面的CSS高斯模糊）：

#search {
  filter: blur(10px); /* Doesn't work anywhere yet */
  -webkit-filter: blur(10px);
  filter: url('blur.svg#blur'); /* for Firefox - http://jordanhollinger.com/media/blur.svg */
}

在查看您的网站时，我看到了这个：

#blur-overlay {
  filter: blur(15px);
}

文章明确指出这个css属性在任何地方都不起作用。它继续使用代码示例（这是我给你的）。对于Firefox兼容性，它链接到svg文档的模糊定义。

要执行此特定操作，请创建一个svg文件（您可以将其嵌入到文档中或将其托管在其他位置）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="svg_blur" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
</svg>

将相应的url（）添加到您的css文件中，如下所示：

#blur-overlay {
  filter: blur(10px);
  -webkit-filter: blur(10px);
  /* If you're using an SVG in the document */
  filter: url('#svg_blur');
  /* If you're using an SVG hosted on your web server, say at /static/blur.svg */
  filter: url('/static/blur.svg#svg_blur');
}

Answer 2

（据我所知）没有简单的方法可以实现这一点。这是因为CSS模糊仅适用于特定元素。所以你可以模糊你的透明圆圈，但它不会影响它背后的任何东西。

我能想到的唯一可能的解决方案是同时运行两个幻灯片。你已经拥有的那个，然后是第二个。第二个应用CSS模糊。然后在模糊的幻灯片上，您可以使用CSS使其成为一个隐藏溢出的圆圈。

模糊改变div背后的元素

2 个答案: