CSS模糊div但不是文本 - 底層圖像必須在div後可見

基本上我想用css模仿this效果。CSS模糊div但不是文本 - 底層圖像必須在div後可見

這裏是一個圖：

http://ppt-lt.crystalgraphics.com/lt_dental_0907_powerpoint_templates_title_slide.jpg

要求：

必須是半透明的，以允許下面的圖像顯示略微
文本內不能被模糊

我試過使用css過濾器p但它會模糊它所應用的元素內的任何內容。最困難的部分是獲取下面的圖像來顯示，而不使用覆蓋div上的背景圖像。

任何幫助，非常感謝。

來源

2014-07-22 Haden Hiles

我們需要在Jsfiddle中查看當前的HTML和CSS。 –

可能的重複 - http://stackoverflow.com/questions/19375311/div-blur-of-part-of-backgroung-image-with-css?rq=1 –

如果您插入文本到在該答案中找到的js小提琴你會發現它也很模糊。這是我的問題。謝謝。 –

如果文本位於正在模糊的div內，則不能限制該文本，因爲文本的開始位置與div相同。你應該考慮做的事情是把div加倍並且把它放在一個位於正確位置的相對容器div內。然後模糊頂部的div，並保持其他div沒有模糊，因爲它們都是絕對定位的，它們將彼此重疊，您可能需要用戶頂部：0px，div設置示例。

<div> - relative div, this keeps the other divs in the right position. 
     <div>Absolute and blurred</div> 
     <div>Absolute and not blurred - contains text</div> 
</div>

來源

2014-07-22 19:42:45 TheHamstring

CSS模糊div但不是文本 - 底層圖像必須在div後可見

回答

相關問題