背景模糊-jQuery /純CSS /圖片？
[英]Blur background - Jquery / Pure CSS / Image?
問題描述
我需要創建一個頁面，該頁面具有全屏封面圖像和2個div塊，其中包含位於該封面圖像頂部的內容。
div塊需要具有稍微灰色的模糊背景效果-與Yahoo Weather應用程序使用的效果類似
而不是模糊整個背景，我只需要覆蓋疊加的div背景-而不是整個背景，這讓我很頭疼！
有沒有人設法達到類似的結果-或通過Jquery / Pure Css或組合知道是否有可能嗎？
4 個解決方案
解決方案1
3 2013-06-17 13:15:32
有一個名為blur.js的jQuery插件，聲稱可以完成您想做的事情。 尚未檢查。
解決方案2
1 2013-06-17 13:09:18
解決方案3
1 2013-10-06 20:44:28
我只是想出了怎么做！ 背景和內容div都需要具有相同的背景和相同的位置/大小。 並使用background-attachment: fixed在兩個上面。 您可以使用-webkit-filter: blur(5px);來模糊div -webkit-filter: blur(5px); 。 您可能需要使用z-index，具體取決於頁面上其他內容的位置。 同樣，如果要在模糊div內添加內容，則必須將其放在位於其頂部的完全獨立的div中，否則內部的所有內容也將變得模糊。 這是代碼：
<body style="margin: 0px;">
<div id="bg" style="background: url('images/1.png') no-repeat; background-attachment: fixed; min-width: 100%; min-height: 100%;">
<div id="blur-cutoff" style="width: 280px; height: 280px; position: absolute; left: 50%; margin-left: -140px; margin-top: 10px; overflow: hidden;">
<div id="blur" style="width: 300px; height: 300px; background: url('images/1.png') no-repeat; background-attachment: fixed; margin-left: -150px; left: 50%; -webkit-filter: blur(5px); position: absolute;">
</div>
</div>
<div id="unblur" style="width: 300px; height: 300px; position: absolute; left: 50%; margin-left: -150px; z-index: 2;">
<p class="blurtext" style="font-family: tahoma; color: #FFFFFF; text-align: center; line-height: 300px;">This is the blurred div</p>
</div>
</div>
</body>
我無法讓jsfiddle為此工作，所以如果有人可以做到，那就太棒了。 這里的整體思想是，兩個div在同一位置具有完全相同的內容。 這樣，無論模糊的div移動到哪里，它都將看起來像是在模糊背景。
解決方案4
0 2013-06-17 14:06:33
您可能可以使用css3 filter：blur（）屬性來使圖像模糊，但是您需要使背景圖像與背景元素相同（且位置相同）。 您還需要確保Fuzzyed元素與要添加的內容（：before）是分開的，否則會同時模糊內容。 您還可以使用filter屬性更改飽和度以及其他元素。
用pixastic模糊圖像，並使用jquery將其設置為背景
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.