Css 你能模糊div下面/后面的内容吗？

我现在正在Photoshop中创建一个新的网页设计，但我想知道是否有可能模糊div下面的内容

我想在我的页面上创建一个半透明的导航条，固定在屏幕顶部。所有在下面/后面流动的东西，我都想模糊。对于那些拥有iOS 7 iDevice的用户，请查看Safari的标题；页眉下方的页面模糊。这就是我想要的效果

我不介意在旧浏览器（IE8等）上不工作的效果，在这种情况下，将有0.5不透明度的白色背景作为后备

---

如果这是可能的，我真的在寻找必要的代码

您可以使用css3进行此操作，这会模糊整个元素

div (or whatever element) {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

---

Fiddle:

如果您想启用取消模糊，您不能只将模糊CSS添加到主体中，您需要将每个可见子对象直接模糊到主体下一个级别，然后移除CSS以取消模糊。原因是由于CSS中的“层叠”，您无法撤消对主体子对象的CSS模糊效果的层叠。此外，要模糊身体的背景图像，需要使用伪元素：before

//HTML

<div id="fullscreen-popup" style="position:absolute;top:50%;left:50%;">
    <div class="morph-button morph-button-overlay morph-button-fixed">
        <button id="user-interface" type="button">MORE INFO</button>
        <!--a id="user-interface" href="javascript:void(0)">popup</a-->
        <div class="morph-content">
            <div>
                <div class="content-style-overlay">
                    <span class="icon icon-close">Close the overlay</span>
                    <h2>About Parsley</h2>
                    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
                    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
                    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
                    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
                    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
                    <p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko. Lotus root water spinach fennel kombu maize bamboo shoot green bean swiss chard seakale pumpkin onion chickpea gram corn pea. Brussels sprout coriander water chestnut gourd swiss chard wakame kohlrabi beetroot carrot watercress. Corn amaranth salsify bunya nuts nori azuki bean chickweed potato bell pepper artichoke.</p>
                </div>
            </div>
        </div>
    </div>
</div>

//CSS

/* Blur - doesn't work on IE */

.blur-on, .blur-element {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);

    -webkit-transition: all 5s linear;
    transition        : all 5s linear;
    -moz-transition   : all 5s linear;
    -webkit-transition: all 5s linear;
    -o-transition     : all 5s linear;
}
.blur-off {
    -webkit-filter: blur(0px) !important;
    -moz-filter   : blur(0px) !important;
    -o-filter     : blur(0px) !important;
    -ms-filter    : blur(0px) !important;
    filter        : blur(0px) !important;
}
.blur-bgimage:before {
    content: "";
    position: absolute;
    height: 20%; width: 20%;
    background-size: cover;
    background: inherit;
    z-index: -1;

    transform: scale(5);
    transform-origin: top left;
    filter: blur(2px);       
    -moz-transform: scale(5);
    -moz-transform-origin: top left;
    -moz-filter: blur(2px);       
    -webkit-transform: scale(5);
    -webkit-transform-origin: top left;
    -webkit-filter: blur(2px);
    -o-transform: scale(5);
    -o-transform-origin: top left;
    -o-filter: blur(2px);       

    transition        : all 5s linear;
    -moz-transition   : all 5s linear;
    -webkit-transition: all 5s linear;
    -o-transition     : all 5s linear;
}


//Javascript

function blurBehindPopup() {
    if(blurredElements.length == 0) {
        for(var i=0; i < document.body.children.length; i++) {
            var element = document.body.children[i];
            if(element.id && element.id != 'fullscreen-popup' && element.isVisible == true) {
                classie.addClass( element, 'blur-element' );
                blurredElements.push(element);
            }
        }
    } else {
        for(var i=0; i < blurredElements.length; i++) {
            classie.addClass( blurredElements[i], 'blur-element' );
        }
    }
}
function unblurBehindPopup() {
    for(var i=0; i < blurredElements.length; i++) {
        classie.removeClass( blurredElements[i], 'blur-element' );
    }
}

//HTML
更多信息
关闭覆盖层
关于欧芹
秋葵甜菜，绿叶玉米，大豆，秋葵葫芦。欧芹、葱、小胡瓜、塔索伊、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、西红柿。蒲公英黄瓜花生豌豆花生索科西葫芦

萝卜、绿叶、雅罗、大米、芦笋、甘蓝、花椰菜、生菜、大头菜、苋菜、菠菜、鳄梨、大豆、甘蓝、芦笋、冬马齿苋、羽衣甘蓝。芹菜土豆葱沙漠葡萄干辣根菠菜胡萝卜soko。莲藕菠菜茴香玉米笋绿豆瑞士甜菜海蓝南瓜洋葱鹰嘴豆克玉米豆。抱子甘蓝、芫荽、菱角、葫芦、瑞士甜菜、大头菜、甜菜根、胡萝卜、豆瓣菜。玉米苋菜、盐芥、坚果、紫苏、豆子、繁缕、马铃薯、甜椒、朝鲜蓟

秋葵甜菜，绿叶玉米，大豆，秋葵葫芦。欧芹、葱、小胡瓜、塔索伊、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、西红柿。蒲公英黄瓜花生豌豆花生索科西葫芦

萝卜、绿叶、雅罗、大米、芦笋、甘蓝、花椰菜、生菜、大头菜、苋菜、菠菜、鳄梨、大豆、甘蓝、芦笋、冬马齿苋、羽衣甘蓝。芹菜土豆葱沙漠葡萄干辣根菠菜胡萝卜soko。莲藕菠菜茴香玉米笋绿豆瑞士甜菜海蓝南瓜洋葱鹰嘴豆克玉米豆。抱子甘蓝、芫荽、菱角、葫芦、瑞士甜菜、大头菜、甜菜根、胡萝卜、豆瓣菜。玉米苋菜、盐芥、坚果、紫苏、豆子、繁缕、马铃薯、甜椒、朝鲜蓟

秋葵甜菜，绿叶玉米，大豆，秋葵葫芦。欧芹、葱、小胡瓜、塔索伊、豌豆芽、蚕豆、羽衣甘蓝、蒲公英、秋葵、西红柿。蒲公英黄瓜花生豌豆花生索科西葫芦

萝卜、绿叶、雅罗、大米、芦笋、甘蓝、花椰菜、生菜、大头菜、苋菜、菠菜、鳄梨、大豆、甘蓝、芦笋、冬马齿苋、羽衣甘蓝。芹菜土豆葱沙漠葡萄干辣根菠菜胡萝卜soko。莲藕菠菜茴香玉米笋绿豆瑞士甜菜海蓝南瓜洋葱鹰嘴豆克玉米豆。抱子甘蓝、芫荽、菱角、葫芦、瑞士甜菜、大头菜、甜菜根、胡萝卜、豆瓣菜。玉米苋菜、盐芥、坚果、紫苏、豆子、繁缕、马铃薯、甜椒、朝鲜蓟

//CSS
/*模糊-不适用于IE*/
.blur打开，.blur元素{
-webkit过滤器：模糊（10px）；
-moz滤波器：模糊（10px）；
-o-滤波器：模糊（10px）；
-ms过滤器：模糊（10px）；
过滤器：模糊（10px）；
-webkit过渡：所有5s线性；
过渡：所有5s线性；
-moz过渡：所有5s线性；
-webkit过渡：所有5s线性；
-o-过渡：所有5s线性；
}
.模糊{
-webkit过滤器：模糊（0px）！重要；
-moz过滤器：模糊（0px）！重要；
-o-过滤器：模糊（0px）！重要；
-ms过滤器：模糊（0px）！重要；
过滤器：模糊（0px）！重要；
}
.模糊图像：之前{
内容：“；
位置：绝对位置；
高度：20%；宽度：20%；
背景尺寸：封面；
背景：继承；
z指数：-1；
变换：尺度（5）；
变换原点：左上角；
过滤器：模糊（2px）；
-moz变换：尺度（5）；
-moz变换原点：左上角；
-moz滤波器：模糊（2px）；
-webkit转换：规模（5）；
-webkit变换原点：左上角；
-webkit过滤器：模糊（2px）；
-o变换：标度（5）；
-o变换原点：左上角；
-o-滤波器：模糊（2px）；
过渡：所有5s线性；
-moz过渡：所有5s线性；
-webkit过渡：所有5s线性；
-o-过渡：所有5s线性；
}
//Javascript
函数bluindpopup（）{
如果（blurredElements.length==0）{
for（var i=0；i

---

海报不希望元素模糊，他们希望背景清晰