使用CSS模糊div div

使用CSS3模糊div是否可能？我不是說javascript模糊，我的意思是Photoshop模糊。使用CSS模糊div div

我不想讓div的邊緣模糊，我想div的內容也會模糊。（我是否問了太多的瀏覽器？）

如果不可能，那麼一些好的解決方法技巧是什麼？

來源

2010-12-18 Utkarsh Sinha

爲ie你可以使用過濾器：http://msdn.microsoft.com/en-us/library/ms532979(VS.85).aspx其他瀏覽器使用畫布可能是要走的路。 – Zevan 2010-12-18 16:37:41

它可能與一個SVG過濾器。

它的基本原理是它只是一個簡單的feGaussianBlur。

這就是：http://jsfiddle.net/aXUtU/1/

這在Firefox 4，而應該從3.5工作起來除了使用svg元素沒有命名空間/ XMLNS東西（我認爲它應該在3.6工作）的問題。

有多少空間讓它流入;如果你把這段文字放到一行中，你會看到特別是最後一個剪輯。

根據您的內容，結合多個box-shadow S（inset並開始）和text-shadow可以達到類似的效果。上面的鏈接還包含一個對文本實現類似效果的開始。

來源

2010-12-18 10:48:04

值得一提的是，它只適用於Firefox *（我的Chrome沒有渲染它，因此我認爲其他人也不會這樣做），因此，它畢竟不是那麼棒。 – jolt 2010-12-18 11:03:19

@Tom：我不確定是否支持瀏覽器，但我覺得它只是Firefox。使用SVG的方式有點棘手;例如背景圖像在所有現代瀏覽器中都可以與SVG一起使用（我將FF 4分類爲現代版，而不是3.6版）。或者，如果文檔的實際部分是在SVG中完成的，那麼它將起作用。 @Utkarsh：由於瀏覽器的支持，SVG過濾器可能不會做你需要的東西，但是我的'box-shadow' +'text-shadow'建議應該擺動它，不提供圖像。我將用一些示例來更新演示。 – 2010-12-18 12:29:20

雖然我看到他正在尋找替代品，但它不是CSS。 – Rob 2010-12-18 13:43:13

嗯...我想出了這一點：

.blur { 
    color: transparent; 
    text-shadow: 0px 0px 2px #000000; 
}

這將使文字模糊，可以肯定的！唯一的問題是它只會使文本模糊。沒有影響或任何圖像。但我認爲，與這http://plugins.jquery.com/project/blurimage一起，你可以使它更強大！

玩得開心！

來源

2010-12-18 15:05:52 jolt

使用CSS模糊div div

回答

相關問題