2

如何使用 -webkit-filter（或过滤器）在 1px 和 0 之间制作非常小的模糊效果？

我已经尝试过介于 1em 和 0.01em 之间的东西，但就这个过滤器将其重新计算为像素及以下，如果它低于 1px，那么根本就没有模糊..

4

2 回答 2

1

这是一个相当复杂的解决方案，涉及复制一些内容：http: //jsfiddle.net/BWj28/1/

它的工作原理是将内容框复制 4 次，将复制者在每个方向上移动 1 个像素，并为复制者计算适当的不透明度。上面的版本需要不透明的背景。

      ---
      -a-
      ---

 ---  con  ---
 -d-  ten  -c-
 ---   t   ---

      ---
      -b-
      ---

HTML 示例布局：

<div class="wrap">
    <div class="a t">Hello World!</div>
    <div class="b t">Hello World!</div>
    <div class="c t">Hello World!</div>
    <div class="d t">Hello World!</div>
    <div class="content">Hello World!</div>
</div>​

CSS：

.wrap {
    position: relative;
}
.a,.b,.c,.d {
    position: absolute;
}
.a { top: -1px; left:  0px; z-index:1; opacity:1;     }
.b { top: +1px; left:  0px; z-index:2; opacity:0.5;   }
.c { top:  0px; left: +1px; z-index:3; opacity:0.333; }
.d { top:  0px; left: -1px; z-index:4; opacity:0.25;  }
.wrap > div {
    background: yellow; /* any opaque background */
}
于 2012-06-17T11:56:03.847 回答
-1

有人认为我想告诉你这种类型的特性在 CSS3 中没有应用，因为它没有完全支持，但 CSS 的未来可能会提供这种特性......

无论如何-webkit-filter只适用于 chrome ......所以，这样的代码对你有用，

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

参考：点击...

于 2012-06-17T11:49:10.920 回答