一个div的背景模糊化

Question

一个div的背景模糊化

5

我想要模糊一个

的背景。我只能找到适用于图像背景而不是HTML元素的解决方案。它是为移动设备使用，所以CSS3不是问题。我已经在JSfiddle上展示了我的困境。 我的期望结果: 当下拉菜单出现时，它会模糊所有直接在其后面的元素内容，而不是整个页面。

以下是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>

编辑：2013年6月18日13:00

我尝试使用“已接受的答案”来工作，但出于某种原因，当从JSfiddle中提取时它不起作用。

这是我的代码：

<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>

我尝试过使用DOM准备包装器和不使用

- user1320260

1

尝试一下这个 jq 插件 http://blurjs.com/，我不确定您能否使用 CSS 实现模糊效果。 - Pavel

请查看这篇文章：http://css-plus.com/2012/03/gaussian-blur/ - z1m.in

这不是模糊背景div，但看起来很相似 - http://jsfiddle.net/GhrUD/1/ - Reinstate Monica Cellio

下面有很多渴望积分的复制者 :p - Reinstate Monica Cellio

我尝试过blur.js，但它仅适用于图像。这意味着它可以适用于HTML元素，但事实并非如此，严格限制为仅适用于图像。这就是为什么它不符合我的需求。 - user1320260

1

Aravind30790展示了如何模糊一个元素，但那只是如何模糊实际的元素 - 而不是其后面的东西。这在html和css中是不可能的。透明度和白色背景是你能得到的最好效果。 - Reinstate Monica Cellio

3个回答

1

尽管它不是真正的模糊，但添加一个带有alpha值的白色背景就可以解决问题（background: rgba(255, 255, 255, 0.8)）。尝试使用不同的alpha值以获得最佳效果。

请查看此处和此处（第二个链接的内容具有灰色背景，因此您可以看到发生了什么）。

- Shomz

谢谢您的建议，但我只想要一个纯模糊的背景，没有任何遮盖物。我本来想尝试为div创建一个模糊背景png图像，但这也没有成功。 - user1320260

不用客气。如果您的内容发生变化，模糊的背景也无法起作用，是吧？我不确定在HTML和CSS中是否可能实现这一点，但希望您能找到一种方法。 - Shomz

-1

创建一个图像叠加层。下面是 CSS 代码供参考

.overlay {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #A5A5A5;
    display: block;
    height: 231px;
    opacity: 0.8;
    filter: alpha(opacity = 50);
    padding: 9px 0px 0 0px;
    position: absolute;
    top: 0;
    width: 298px;   
}

- Snehal Chavan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kevin Lynch · Accepted Answer

我相信这就是您要找的。我使用了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();
    });
});