Question

是否可以将模糊应用于HTML元素（div＆amp; img）？

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

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

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

我用谷歌搜索了它，但它并没有模糊浏览器中的图像：

filter: blur(strength=50);

Answer 1

今天我看到了一篇关于使用CSS box-shadow，text-shadow s，不透明度和颜色模糊内容的精彩教程。

以下是演示：http://tympanus.net/Tutorials/ItemBlur/

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

Answer 2

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

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

Answer 3

您可以将其添加到您的css中，以获取图片：

在以下示例中，您将使用半径为5像素的模糊。并且非常重要使用所有可用的供应商前缀，因此它可以在所有实现此功能的浏览器上运行，并且可以实现“稳定”版本。

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

Answer 4

我认为最好的方法是将相同的图像叠加在自身上几次，并在叠加的图像上测试不同的定位和不透明度。

这是我提出的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>

The result非常有前途。

Answer 5

除text-shadow和box-shadow的技巧外，CSS无法模糊。但即便如此，边框和图像也无法模糊。

但是，

This JavaScript library可以处理图像。

此外，您可能会发现此technique很有趣。使用预先制作的模糊图像，这是一种整洁的错觉。

Answer 6

我不得不在很久以前对这个问题进行了彻底的研究，并提出了一个非常灵活的解决方案，尽管这对某些人的需求可能有点过分。我不仅需要模糊图像，还需要动态模糊半径，叠加颜色和各种图像的叠加不透明度。我还需要选择在背景中模糊图像，其他元素叠加在它上面。这是我能够创建的最佳跨浏览器（和高性能）解决方案。

首先，我手边有一个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属性。

然后，您可以将blur 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>

Answer 7

使用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);
  }

模糊Img＆amp;使用CSS在HTML中使用Div

7 个答案: