如何模糊div後面的內容？

可能重複：
Blur Img's & Div's in HTML using CSS 如何模糊div後面的內容？

所以基本上我想要做的是模糊的內容女巫是div元素的背後，是div與透明度0 - 0.5。

這裏是一個jsFiddle

EDIT [1]：我真正想要的是一個div越過圖像和下div面積所迷離。 編輯[2]：div與position: absolute越過其他元素和模糊他們。

來源

2012-07-24 skmasq

[此博客文章]（http://drublic.de/blog/effects-for-the-web/）可能會幫助 – MrOBrian 2012-07-24 21:09:39

[HTML5請]（http://html5please.com/）建議您不要。過濾器規範甚至不在工作草案狀態中。 – millimoose 2012-07-24 21:24:04

@MrOBrian是的，它有點顯示我的撤退解決方案，但不是真正的解決方案。 – skmasq 2012-07-24 21:33:19

你應該在上傳時模糊圖像。然後在上傳時裁剪其他圖像（或使用jQuery/css裁剪）。然後結合你必須達到的效果。

使用css完成此任務是不可能的。這個任務使用JavaScript是不好的主意（非常慢）。

唯一的選擇是在背景圖片上使用this技術，然後在其上放置另一個（裁剪爲js/upload）。

來源

2012-07-24 22:41:30 sed

由Purmou由@Keith尼古拉斯註釋的參考答案之後，你可以這樣做：

topblur{ 
    position: absolute; 
    top:2px; 
    left:2px; 
    width: 100%; 
    height: 150px; 
    background-image:url(http://www.stefanides.com/home/yard/back%20yard.jpg); 
    opacity: 40; 
    filter:alpha(opacity=40); 
    border: thin solid black; 
}

不是一個很好的解決方案，但它確實混亂的圖像了！

來源

2012-07-24 21:36:13 mikeY

那麼什麼你建議我同時使用四個不同的'div'元素來模擬模糊效果，更不用說我需要在'div'中呈現圖像位置，女巫正在越過圖像。但我真正想要的是，給定的'div'下的任何元素都是模糊的。 – skmasq 2012-07-24 21:43:06

不建議動畫。只是試圖建議你想要的東西 - 鋪設div的div模糊。停滯div是相同的圖像轉移了幾個像素。 – mikeY 2012-07-24 21:51:44

那麼這是一個好主意，如果圖像和'div'都在靜態位置。但是我想要的更像是放大鏡。 – skmasq 2012-07-24 21:59:25

如何模糊div後面的內容？

回答

相關問題