CSS/Javascript图像模糊：可能吗？

是否可以使用CSS和Javascript向图像添加模糊效果？

是的，：

Pixastic是一个实验性的库，它允许您使用少量JavaScript对图像执行各种操作。开箱即用支持的效果包括去饱和度/灰度、反转、翻转、亮度/对比度调整、色调/饱和度、浮雕、模糊以及更多

Pixastic的工作原理是利用HTML5画布元素，该元素提供对原始像素数据的访问，从而为更高级的图像效果打开了大门。这就是“实验”部分发挥作用的地方。Canvas仅受某些浏览器支持，不幸的是，Internet Explorer不在其中。不过，它在Firefox和Opera中都得到了很好的支持，对Safari的支持只是在最近的Safari 4（beta版）发布时才刚刚到来。Chrome目前在开发频道工作。在IE中使用古老的专有过滤器模拟了一些效果。虽然这些过滤器比它们的Canvas朋友快得多，但它们数量少且有限。希望有一天我们也能在IE上拥有真正的画布

---

或者，您也可以使用或

这也是值得考虑的：

---

使用CSS3，我们可以轻松调整图像。但请记住，这不会改变图像。它仅显示调整后的图像。铬

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

有关更多详细信息，请参阅以下代码

要使图像变为灰色，请执行以下操作：

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

要呈现深褐色外观，请执行以下操作：

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

要调整亮度，请执行以下操作：

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

要调整对比度：

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

要模糊图像，请执行以下操作：

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

---

StackBlur的工作原理：以下是我如何使用它： 同样适用于所有浏览器和ipad！！不同于webkit

从此处下载StackBlur v5.0：

HTML

JS

注: stackBlurCanvasRGB函数的半径值可以在100到-100之间。。只要玩弄价值观，你就会让它发挥作用。 ..CanvasRGB比iPad上的CanvasRGBA工作得更快。。至少我在iPad第四代上注意到了这一点。

使用CSS

.cbp-rfgrid li:hover img {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
}

试试这个：

let blur=document.querySelector（“模糊”）；
设girlImg=document.querySelector（“#girlImg”）；
blur.addEventListener（“输入”，模糊）；
函数模糊（）{
girlImg.style.filter=`blur（${blur.value}px）`
}

模糊：

sport sport-放下你的IE6安装，开始使用该程序！（为+1欢呼）@Clyde Lobo：如果你查看一下这个网站，你会发现它在IE8中运行得非常愉快，IE8肯定与HTML5不兼容，而且示例也能正常工作。@Ardman:在它所说的

Pixastic是如何利用HTML5画布元素工作的，该元素提供了对原始像素数据的访问

，据我所知，IE8没有画布，那么它是如何工作的呢？顺便说一句，图书馆太棒了；）如果你阅读该网站，它会说，

“IE使用古老的专有过滤器模拟了一些效果。虽然这些过滤器比画布上的朋友快得多，但数量少且有限。”

。例如，主页上的灰度效果在IE8中起作用。我可以想象，即使在IE6中，任何

过滤器
效果都会起作用。这已经8年了，你期待什么？谢谢。StackBlur的速度非常棒。
#top {                      
  border-radius:         28%;
  -o-border-radius:      28%;
  -webkit-border-radius: 28%;
  -moz-border-radius:    28%;
  position: absolute;
  top: -2px;
  left: -2px;
  z-index: 40;
  width: 208px;
  height: 208px;
}

var topCan = document.getElementById("top");
var toptx  = topCan.getContext("2d");
toptx.drawImage(_specimenImage, 0, 0);
var blur   = 0;

blur       = Math.abs(_sliderF.getPosition(8, -8)); //this returns multiple values 
                                                    //based on a new slider position

stackBlurCanvasRGB("top", 0, 0, topCan.width, topCan.height, blur);

.cbp-rfgrid li:hover img {
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
filter: blur(2px);
}