模糊半頁

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> 

馬克，如果它引用的SVG容器元素，但不是<foreignObject>直接<use>元素只能。

必須注意使所有元素足夠大以包含完整的html頁面。作爲一種額外的措施，爲嵌入式頁面的html元素提供overflow:hidden規則可能是個好主意。如果滾動條出現，它們將獨立工作在頁面的兩個半邊上。