模糊背景的div [英] Blur background of a div
本文介绍了模糊背景的div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想模糊 div 的背景。我只能找到适用于图像作为背景，而不是HTML元素的解决方案。它是为移动使用所以CSS3不是一个问题。我已将 JSfiddle 一起显示出我的困境。
我想要的结果：当出现下拉菜单时，它会直接隐藏其后面的所有元素的内容
这里是 HTML ，例如：JSFiddle：
HTML
< a href =＃id =link>打开/关闭< / a>
< div id =slide>
< p>文字文字文字文字文字文字文字文字< / p>
< p>文字文字文字文字文字文字文字文字< / p>
< p>文字文字文字文字文字文字文字文字< / p>
< p>文字文字文字文字文字文字文字文字< / p>
< / div>
< div id =page_content>
< p>页面内容，而不是图片页面内容，而不是图片页面内容，而不是图片< / p>
< p>页面内容，而不是图片页面内容，而不是图片页面内容，而不是图片< / p>
< p>页面内容，而不是图片页面内容，而不是图片页面内容，而不是图片< / p>
< p>页面内容，而不是图片页面内容，而不是图片页面内容，而不是图片< / p>
< / div>
已编辑：13：00 18/06/2013
我试图让接受的答案工作，但由于某种原因，当从JSfiddle中提取时它不工作
这是我的代码：
< html>
< head>
< meta name =viewportcontent =width = device-width，initial-scale = 1，maximum-scale = 1>
< script src =http://code.jquery.com/jquery-1.9.0.js>< / script>
< script>
$（document）.ready（function（）{
$（'＃link'）。 '）.slideToggle（'slow'，function（）{
}）;
}）;
$（'＃main-view' {
html2canvas（document.body，{
onrendered：function（canvas）{
document.body.appendChild（canvas）;
}，
width：300，
height：100
}）;
$（'＃cover'）。slideToggle（'fast'，function（）{
$ '＃partial-overlay'）。slideToggle（）;
}）;
}）;
}）;
< / script>
< style>
#link {
z-index：1000;
position：absolute;
top：0;
left：0;
}
＃partial-overlay {
padding-top：20px;
display：none;
width：100％;
height：100px;
position：fixed;
top：0;
left：0;
z-index：99;
}
canvas {
height：100px;
position：fixed;
top：0;
left：0;
-webkit-filter：blur（2px）;
}
#cover {
display：none;
height：99px;
width：100％;
background：#fff;
position：fixed;
top：0;
left：0;
}
＃main-view {
width：300px;
}
< / style>
< / head>
< body>
< div id =main-view>
< a href =＃id =link>打开/ clode< / a>
页面内容，而不是图像页面内容，不是图像页面内容，不是图像page_content页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，页面内容，而不是图像页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，不是图像页面内容，
< / div&
< div id =cover>< / div>
< div id =partial-overlay>
< p>这里有一些内容< / p>
< p>这里有一些内容< / p>
< / div>
< / body>
< / html>
我已经尝试过和没有DOM准备好的包装
解决方案
我相信这是你要找的。我使用canvas元素。我怀疑这将会变得非常受欢迎的新版本的iOS7，利用这种效果。
fiddle http://jsfiddle.net/kevinPHPkevin/TfWs3/49/
$（'＃main-view'）。click（function（）{
html2canvas（document.body，{
onrendered：function（canvas）{
document.body .appendChild（canvas）;
}，
width：300，
height：100
}）;
$（'＃cover'）。 slideToggle（'fast'，function（）{
$（'＃partial-overlay'）。slideToggle（）;
}）;
}）;
I want to blur the background of a div. I can only find solutions that apply to images as background, not HTML elements. It is for mobile use so CSS3 is not a problem. I have put a JSfiddle together showing my dilema.
My desired result: When the dropdown appears, it blurs the content of all the elements directly behind it, not the entire page.
Here is the HTML for example purposes from the JSFiddle:
HTML
<a href="#" id="link">open/close</a>
<div id="slide">
<p>Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text </p>
<p>Text Text Text Text Text Text Text Text </p>
</div>
<div id="page_content">
<p>Page content, not images Page content, not images Page content, not images </p>
<p>Page content, not images Page content, not images Page content, not images </p>
<p>Page content, not images Page content, not images Page content, not images </p>
<p>Page content, not images Page content, not images Page content, not images </p>
</div>
EDITED:13:00 18/06/2013
I tried to get the "accepted answer" to work but for some reason it doesn't work when extracted from the JSfiddle
Here's my code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$( document ).ready(function() {
$('#link').click(function() {
$('#slide').slideToggle('slow', function() {
});
});
$('#main-view').click(function(){
html2canvas(document.body, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width: 300,
height: 100
});
$('#cover').slideToggle('fast', function(){
$('#partial-overlay').slideToggle();
});
});
});
</script>
<style>
#link {
z-index: 1000;
position: absolute;
top:0;
left:0;
}
#partial-overlay {
padding-top: 20px;
display:none;
width: 100%;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index:99;
}
canvas{
height: 100px;
position: fixed;
top: 0;
left: 0;
-webkit-filter:blur(2px);
}
#cover{
display:none;
height:99px;
width:100%;
background:#fff;
position:fixed;
top:0;
left:0;
}
#main-view {
width:300px;
}
</style>
</head>
<body>
<div id="main-view">
<a href="#" id="link">open/clode</a>
Page content, not images Page content, not images Page content, not images page_content Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content,
</div>
<div id="cover"></div>
<div id="partial-overlay">
<p>Some content here</p>
<p>Some content here</p>
</div>
</body>
</html>
I've tried with and without the DOM ready wrapper
解决方案
I believe this is what you are looking for. I use the canvas element. I suspect this will become very popular with the new pending release of iOS7 that makes use of this effect.
fiddle http://jsfiddle.net/kevinPHPkevin/TfWs3/49/
$('#main-view').click(function(){
html2canvas(document.body, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
},
width: 300,
height: 100
});
$('#cover').slideToggle('fast', function(){
$('#partial-overlay').slideToggle();
});
});
这篇关于模糊背景的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
