模糊半页

Question

我需要模糊半页的内容，基本上我需要在客户支付之前显示文档预览。

为了实现这一点，我有一个看起来非常像这样的HTML页面：

我需要应用模糊，模糊应该从页面高度的50％开始，然后我会截取屏幕并向客户显示该图像。

所以：

1. 我无法将过滤器模糊应用于div，因为涉及到很多div。让我们说，模糊将从“它来自哪里”的某处开始。
2. 我尝试使用滤镜模糊添加div位置绝对值，但未在文本上应用模糊。我也尝试用SVG做到这一点，但没有快乐。

想法？

Answer 1

这是一个可能有点摇摇晃晃的解决方案，但在Firefox中起作用，至少：

<?xml version="1.0" standalone="yes"?>
<svg width="600" height="800" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:html="http://www.w3.org/1999/xhtml">
  <filter id="halfBlur" filterUnits="objectBoundingBox" x="0" y="0.5" width="1" height="0.5">
    <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
  </filter>
  <g id="source">
    <foreignObject width="600" height="800">
      <html:iframe style="width:600px;height:800px" src=""></html:iframe>
    </foreignObject>
  </g>
  <use xlink:href="#source" filter="url(#halfBlur)"/>
</svg>

标记<use>元素仅在引用SVG容器元素时才有效，但不能直接引用<foreignObject>。

必须注意使所有元素足够大以包含完整的html页面。作为额外措施，为嵌入页面的html元素提供overflow:hidden规则可能是个好主意。如果滚动条显示，它们将独立地在页面的两半上工作。