一个div元素的模糊效果

Question

能否在 div 元素上添加高斯模糊效果？如果可以，如何实现？

- bialasikk

---

你目前找到了什么？你在谷歌上搜索过这个问题吗？ - Erty Seidohl

可能是HTML5高斯模糊效果的重复问题。 - Chris Laplante

可能是如何在使用background-image设置的背景图像上应用CSS 3模糊滤镜？的重复问题。 - AncientSwordRage

Answer 1

我认为这就是您在寻找的内容？如果您想要向div元素添加模糊效果，您可以直接通过CSS滤镜来实现--请参见示例：http://jsfiddle.net/ayhj9vb0/

div {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
    width: 100px;
    height: 100px;
    background-color: #ccc;
}

- BenSlight

---

正是我需要的。 - Muhammad Haseeb

Answer 2

您可以执行以下操作：

1. filter: blur(10px)

2. backdrop-filter: blur(10px)

3. 如果您想要模糊div元素的边缘，请使用box-shadow。

   box-shadow: 10px 20px 20px grey;

20px的第三个值设置了模糊值，该值越大，模糊程度就越高。

您可以使用其中任何一个方法，但请注意，backdrop-filter在Firefox和Internet Explorer浏览器中不受支持。

- fatima_r24

Answer 3

尝试使用这个库：https://github.com/jakiestfu/Blur.js-II

这应该可以满足您的需求。

- Phillip Schmidt

---

它在Chrome上有漏洞，加载页面也很慢。 - Murhaf Sousli

Answer 4

这是我找到的内容：

演示: http://tympanus.net/Tutorials/ItemBlur/ 教程: http://tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/

- Noah Wetjen

Answer 5

I got blur working with SVG blur filter:

CSS

-webkit-filter: url(#svg-blur);
filter: url(#svg-blur);

SVG

<svg id="svg-filter">
    <filter id="svg-blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="4"></feGaussianBlur>
    </filter>
</svg>

工作示例：

https://jsfiddle.net/1k5x6dgm/

请注意 - 这将无法在IE版本中运行

- Rijo

Answer 6

元素的背景模糊可以通过使用 backdrop-filter 实现。

请按照以下方式使用：

.your-class-name {
   backdrop-filter: blur(5px);
}

下方的所有元素都会因使用此功能而被模糊。

注意：目前并非每个浏览器都支持此功能。

- yannh

Answer 7

内联 CSS：

style="filter: blur(3px);"

使用class的外部css：

.div-cls{
    filter: blur(3px);
}

同时也得到了主流浏览器的支持[1]。

- Abish R