ページを半分くすぐる

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ルールを指定することをお勧めします。スクロールバーが表示されると、ページの両方の半分で独立して動作します。