使用CSS在HTML中模糊图片和区块

Question

能否对HTML元素（div和img）应用模糊效果？

我正在专门为iPad开发，因此跨浏览器兼容性不是问题，我可以使用HTML5 CSS3技术。

我知道如何模糊文本，但这种CSS不能模糊实际的HTML元素或其边框：

text-shadow: 0 0 8px #000;
color: transparent;

我在谷歌上搜索了这个问题，但是它没有在我的浏览器中模糊图像：

filter: blur(strength=50);

- sazr

---

我被难住了。+1。很想看看一些解决方案。 - mrtsherman

Answer 1

Webkit有一个叫做-webkit-filter的属性，它允许使用模糊技术：-webkit-filter: blur(15px);

http://jsfiddle.net/danielfilho/KxWRA/

- bafromca

---

这是一个很酷的CSS属性，你可以在这里查看当前浏览器的支持情况：http://caniuse.com/#feat=css-filters - Jasper

Answer 2

对于图像，您可以简单地将以下内容添加到CSS中：

在下面的示例中，您将使用5个像素半径的模糊效果。非常重要的是使用所有可用的供应商前缀，以便在实现该功能的所有浏览器上工作，直到它变为“稳定”版本。

img{
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -ms-filter: blur(5px);
  -o-filter: blur(5px);
  filter: blur(5px);
}

- Daniel Filho

---

在稳定版的Firefox中不支持。 - Lucio

@Lucio 我知道你的评论已经14个月了，但是 filter:blur 在Firefox中是支持的。 - p.campbell

Answer 3

我认为最好的方法是将同一张图片叠加几次，并在叠加的图层上测试不同的位置和透明度。

这是我想出来的CSS代码。请注意，我正在使用nth-child CSS3选择器（但您似乎对此没有问题）：

img {
    width:300px;
    height:300px;
    position:absolute;
    opacity:0.2;
}

.container {
    position:relative;
    overflow:hidden;
    width:300px;
    height:300px;
}

img:nth-child(1) {
    opacity:1;   
}

img:nth-child(2) {
    left:2px;
    top:2px;
}

img:nth-child(3) {
    left:-2px;
    top:-2px;
}

img:nth-child(4) {
    left:-1px;
    top:-1px;
}

img:nth-child(5) {
    left:1px;
    top:1px;
}

HTML:

<div class="container">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
    <img src="...">
</div>

这个结果看起来非常有前景。

- Purag

---

干得好，伙计！关于标记，@bookcasey，是的，它确实是个噩梦，但我们可以从服务器端动态生成它，或者借助JS/JQuery的帮助。所以我想我会使用这个。谢谢你提供的很棒的小工具 ;) - tfrascaroli

这个解决方案过于复杂，只是“模拟”效果，相反我们有能够完成任务的过滤器（正如我所指出的）。 - Daniel Filho

哇@DanielFilho，这个答案已经快6年了--为什么要downvote并引用你的答案，而你的答案已经有更多的upvotes？这似乎有些不妥。此外，这个答案并不是那么复杂，只是比其他答案更冗长。这并不意味着它本质上是一个糟糕的解决方案，只是一个不同的解决方案，我认为在Stack Overflow上追求解决方案的完整性是可以的。 - Purag

Answer 4

CSS本身没有模糊的能力，除了使用text-shadow和box-shadow等技术。但即使使用这些技术，边框和图像也不能被模糊化。

然而，这个JavaScript库可以处理图像。

此外，您可能会发现这个 技巧 很有趣。它是一种使用预制模糊图像的巧妙幻觉。

- bookcasey

---

这并不完全正确，因为还有box-shadow和能够在顶部叠加模糊图像而无需引用JS的能力。 - isNaN1247

CSS确实具有模糊滤镜。 - Daniel Filho

但是在2011年它没有成功;-) - bookcasey

Answer 5

我不久前不得不对这个问题进行深入研究，得出了一种非常灵活的解决方案，尽管它可能对某些人的需求过于复杂。我不仅需要模糊图像，还需要动态模糊半径、叠加颜色和叠加不透明度来处理各种类型的图像。我还需要选择只在背景中模糊带有其他元素覆盖的图像的选项。以下是我能够创建的最佳跨浏览器（且性能良好）的解决方案。

首先，我会准备一个SVG，无聊地称为blur.svg。它应用了一个模糊滤镜，如果你仔细看，就会发现stdDeviation（设置模糊半径）实际上是从请求资产的URL中传递的参数进行编程设置的。

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="#{params[:blur]}" />
</filter>
</svg>

然后我有一个SCSS mixin，可以让任何包装器添加模糊叠加层，具有可自定义的模糊半径、叠加层颜色和叠加层不透明度。

@mixin background_blurred($blur_radius:4, $overlay_color:white, $overlay_opacity:0.6) {
  position: relative;
  .background_blurred {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    filter: url('blur.svg#blur?blur=#{$blur_radius}');
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='#{$blur_radius}');
    transform: translateZ(0);
    &:after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: $overlay_color;
      opacity: $overlay_opacity;
    }
  }
  .foreground {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
  }
}

您可能会想知道为什么我包含了transform: translateZ(0);。它的唯一作用是强制在渲染时启用硬件加速以保持性能。您可能还想知道为什么没有供应商前缀。如果您想要，可以在CanIUse上查找诸如filter之类的内容，但我在此项目中使用了autoprefixer来处理这些事情。当然，为什么要使用这个SVG进行过滤，而不是像blur(4px)这样的东西呢？那不是更容易吗？确实如此，但是Firefox（截至撰写本文）仅支持带有URL的filter属性。

然后，您可以将模糊mixin应用于包装器类：

.my_wrapper_class {
  @include background_blurred(3, #f9f7f5, 0.7);
}

请注意，对于此方法，我们必须使用一个具有自定义背景设置的类，而不是使用带有src属性的图像标签。您可以调整背景位置并覆盖背景大小以适应您的需要。

<div class="my_wrapper_class">
  <div class="background_blurred" style="background: url('URL OF IMAGE TO BLUR') no-repeat; background-position: 50% 0;"></div>
  <div class="foreground">
    <p>Stuff that should appear above the blurred background and not be blurred.</p>
  </div>
</div>

- Chris Fritz

Answer 6

使用CSS3，我们可以轻松地调整图像。但请记住，这不会改变图像本身，它只会显示已调整的图像。

在此处查看实时演示和完整源代码

http://purpledesign.in/blog/adjust-an-image-using-css3-html5/

请查看以下代码以获取更多细节。

使图像变为灰色：

img {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
}

要给图片添加深褐色调：

    img {
     -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
}

调整亮度：

 img {
     -webkit-filter: brightness(50%);
     -moz-filter: brightness(50%);  
  }

调整对比度：

 img {
     -webkit-filter: contrast(200%);
     -moz-filter: contrast(200%);    
}

对图像进行模糊处理：

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }

- Raj Nandan Sharma