html - 模糊半页

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 的嵌入页面元素规则。如果出现滚动条，它们将独立作用于页面的两半。