标签: blur

苹果的叠加层似乎不仅仅是透明度.关于如何用CSS和可能的JS实现这种效果的任何想法？

我在半透明叠加div上应用模糊效果时遇到问题.我希望div背后的一切都模糊不清,像这样:

这是一个不起作用的jsfiddle:http://jsfiddle.net/u2y2091z/

任何想法如何使这项工作？我希望尽可能保持简单并使其成为跨浏览器.这是我正在使用的CSS:

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

    filter:blur(4px);
    -o-filter:blur(4px);
    -ms-filter:blur(4px);
    -moz-filter:blur(4px);
    -webkit-filter:blur(4px);
}

我目前正在Photoshop中创建一个新的网页设计,但我想知道是否可以模糊div下面的内容？

我想nav在我的页面上创建一个半透明条,它固定在屏幕顶部.在我下面/后面流动的一切,我都想模糊.对于那些拥有iOS 7 iDevice的用户,请查看Safari的标题; 标题下方的页面模糊不清.这就是我正在寻找的效果.

我不介意效果不适用于旧浏览器(IE8等),在这种情况下,它将具有0.5不透明白色背景作为后备.

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

是否有可能在div元素上添加高斯模糊？如果是的话,我怎么能这样做？

.content {
  float: left;
  width: 100%;
  background-image: url('images/zwemmen.png');
  height: 501px;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -o-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
}

.opacity {
  background-color: rgba(5, 98, 127, 0.9);
  height: 100%;
  overflow: hidden;
}

.info {
  float: left;
  margin: 100px 0px 0px 30px;
  width: 410px;
}

<div class="content">
  <div class="opacity">
    <div class="image">
      <img src="images/zwemmen.png" alt="" />
    </div>
    <div class="info">
      a div wih all sort of information
    </div>
  </div>
</div>

如果我不想模糊按钮,我需要做什么？

http://jsfiddle.net/L8ksa46g/

现在我正在构建一个需要模糊整个UIView的iPhone应用程序.我怎样才能做到这一点？我已经看到了这个框架,但我认为这不适用于UIView.是否有另一种模糊UIView的方法？

更新:检查下面我更新的答案,增加与iOS 7和iOS 8的更新相关性.

如何使用react-native制作模糊效果？喜欢'background-image'

我想切换效果'模糊'和'无','无'意味着没有模糊效果

当我单击保存按钮时,它会触发ng-blur事件,如何触发按钮ng-click事件？如果我点击按钮或输入字段,我仍然希望触发ng-blur事件.

http://jsfiddle.net/tidelipop/wyjdT/

angular.module('MyApp', [])

.filter("placeholder", function(){
    return function (text, length, end) {
        //console.log(typeof text, text, length);
        if(typeof text === 'undefined' || text == ''){
            text = 'Click to edit...';
        }
        return text;
    };
})

.directive("inlineEdit", function($compile, $q){
    return {
        restrict: "A",
        replace: true,
        template: function(tElement, tAttrs){
            var modelStr = tAttrs.inlineEdit, optionsStr = tAttrs.options, modelXtra = '', editElStr = '';
            if(tAttrs.type === 'selectbox'){
                modelXtra = '.value';
                editElStr = '<select ng-show="editMode" ng-blur="endEdit(\''+modelStr+'\')" ng-model="'+modelStr+'" ng-options="a.value for a in '+optionsStr+'"></select>';
            }else if(tAttrs.type === 'textarea'){ …

我正在尝试制作一个与iOS7中的Control Center类似的控制器.从WWDC会议#226我已经学会了如何使用不同的效果获得模糊的图像

UIGraphicsBeginImageContextWithOptions(image.size, NULL, 0);

[view drawViewHierarchyInRect:rect];

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

UIGraphicsEndImageContext();

lightImage = [newImage applyLightEffect];

因此,换句话说,我们只捕获一些图像(制作屏幕截图),执行模糊效果并根据我们的需要使用此模糊图像.

但是如果你在一些动态内容之上打开控制中心,你会注意到控制中心模糊的背景和内容都在变化.

有人知道如何复制这种行为吗？

我看到它的唯一方法是捕捉内容并以一定间隔(例如半秒)制作模糊效果.但它看起来多余.

过去三天我一直在寻找内置的硬件加速方式,用android来模拟位图.我偶然发现了某些解决方法,比如缩小位图并再次缩放,但这种方法产生的质量低,不适合我的图像识别要求.我还读到使用着色器或JNI实现卷积是一个很好的方法,但我不能相信Android框架中没有内置的解决方案用于这个非常常见的目的.目前我最终在Java中使用自编写的卷积实现,但它的速度非常慢.我的问题是:

• 有没有真的没有内置的解决方案在Android框架？
• 如果没有:在仍然合理的实施和维护复杂性的情况下,加速卷积的最有效方法是什么？我们应该使用JNI,着色器还是完全不同的东西？