Question

我正在尝试使用css模糊滤镜，同时保持图像的不透明度。在下面的示例中，我有一个只是蓝色方块的图像。当我应用模糊滤镜时，边缘最终变为透明，您可以看到下面的黑色div。如果没有引入透明度，有没有办法应用模糊？理想情况下，我希望它只在平均中包含跨度内的可见像素。我知道在这个例子中它会产生一个稳定的蓝色方块，但对于不那么简单的情况，它会给出我正在寻找的结果。

div {
  background-color: black;
  width: 100px;
  height: 100px;
}
span {
  overflow: hidden;
  -webkit-filter: blur(30px);
  display: block;
}

<div>
  <span>
    <img width="100px" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/000080_Navy_Blue_Square.svg/600px-000080_Navy_Blue_Square.svg.png">
  </span>
</div>

Answer 1

conv = convert(DataArray, comprehension)
insert!(df, size(df, 2) + 1, conv, :foo)
#=> 4x4 DataFrame
#  | Row | A | B | C | foo      |
#  |-----|---|---|---|----------|
#  | 1   | 1 | 1 | 5 | 0.2      |
#  | 2   | 2 | 0 | 4 | NA       |
#  | 3   | 3 | 2 | 3 | 0.666667 |
#  | 4   | 4 | 3 | 3 | 1.0      |

typeof(df[:foo]) #=> DataArray{Any,1} (constructor with 1 method)
dropna(df[:foo]) #=> Array{Any,1}: [0.2, 0.667, 1.]

http://jsfiddle.net/serGlazkov/nv6evzmk/

Answer 2

试着看看这里：

How to apply a CSS 3 blur filter to a background image

https://css-tricks.com/almanac/properties/f/filter/

http://www.inserthtml.com/2012/06/css-filters/＆lt; ----（我认为这与你要找的非常相似。）

如何在没有边缘透明的情况下使用css模糊滤镜？

2 个答案: