使用CSS模糊Img的＆Div的HTML
是否可以应用HTML元素（div＆img）模糊？
我正在开发专为iPad，所以跨浏览器兼容性不是一个问题，我可以使用HTML5的CSS3技术。
我知道如何模糊文字，但这个CSS不会模糊实际的HTML元素或其边框：
text-shadow: 0 0 8px #000; color: transparent; 我GOOGLE了这个，但它不会模糊我的浏览器中的图像：
filter: blur(strength=50);
我今天看到一个很酷的教程，关于使用CSS box-shadow ， text-shadow ，opacity和color来模糊内容。
这是演示： http : //tympanus.net/Tutorials/ItemBlur/
和教程： http : //tympanus.net/codrops/2011/12/14/item-blur-effect-with-css3-and-jquery/
Webkit有一个名为-webkit-filter的属性，允许使用模糊技术： -webkit-filter: blur(15px);
你可以简单地把这个添加到你的css中，用于一个图像：
在以下示例中，您将使用半径为5个像素的模糊。 使用所有可用的供应商前缀是非常重要的 ，所以它可以在所有实现了这个function的浏览器上运行，而且它是一个“稳定的”版本。
img{ -webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); -o-filter: blur(5px); filter: blur(5px); }
我认为最好的方法是将相同的图像分层叠印几次，然后testing覆盖图像上的不同位置和不透明度。
这是我提出的CSS。 请记住，我正在使用第nth-child CSS3select器（但你似乎没有问题）：
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>
结果是相当有希望的。
除了使用text-shadow和box-shadow技巧之外，CSS不具备模糊的function。 但即使有了这些，边界和图像也不能模糊。
这个JavaScript库 ，但是，可以处理图像。
另外，你可能会觉得这个技巧很有趣。 使用预制的模糊图像是一个整洁的幻觉。
我不得不在不久之前彻底地研究这个问题，并提出了一个非常灵活的解决scheme，尽pipe对于某些人的需求可能是过度的。 我不仅需要模糊的图像，还需要dynamic模糊半径，覆盖颜色和覆盖不透明度的各种图像。 我还需要select在背景上模糊图像，并在其上覆盖其他元素。 这是我能够创build的最好的跨浏览器（和高性能）解决scheme。
首先，我手头上有一个SVG，名字叫blur.svg 。 它应用模糊filter，如果仔细观察， 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 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 mix应用于包装类：
.my_wrapper_class { @include background_blurred(3, #f9f7f5, 0.7); }
请注意，对于这种方法，我们必须在style属性中使用具有自定义背景的类，而不是带有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>
使用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); }
