【问题标题】:How can I blur the dynamic contents behind a div?如何模糊 div 背后的动态内容?
【发布时间】:2016-07-25 18:31:05
【问题描述】:

我正在开发一个带有全屏样式的谷歌地图页面的项目。 是否有任何方法(css、jQuery 或其他选项...)以类似于 iOS 磨砂/模糊效果的模糊效果覆盖标题和滑入式侧边栏?

我正在努力实现这样的目标。 Sample blurred header

我的问题是,因为我无法控制标题下方的内容并且它不断变化,所以我无法使用 2 图像技巧来模拟模糊的背景。有什么建议吗?

【问题讨论】:

  • 虽然你可以模糊当前元素,但我不相信有任何方法可以模糊元素后面的内容......
  • backdrop-filter,但目前几乎没有浏览器支持。
  • 您可以将动态内容复制到一个新元素中,带有clipping mask,然后对内容进行模糊处理。
  • 截至 2019 年,Chrome、Edge、Safari 和 Opera 已经支持backdrop-filter

标签: javascript jquery html css


【解决方案1】:

阅读这篇文章https://stackoverflow.com/a/19688466/1663572和相关链接http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript

解决方案使用此步骤。

  1. 呈现 HTML
  2. 复制内容区域并将其转换为画布。
  3. 将画布移动到页眉部分
  4. 将内容的滚动与标题中的画布同步

页面下方是一个示例(狭窄的示例)。有一些丢失的图像或其他东西,有点溢出,但请尝试滚动。但我不确定你提到的内容的变化频率。这可能会导致严重的性能问题。不过试试看。

我想不出任何其他选择来实现您想要的非常复杂的想法。

【讨论】:

    【解决方案2】:

    如果您正在加载外部图像,那么您能否将其加载到svg 容器中作为背景并应用feGaussianBlur 过滤器?不确定您对标记的控制程度。

    关于模糊的 w3 Schools 入门:

    http://www.w3schools.com/svg/svg_fegaussianblur.asp

    一个 jsfiddle(不是我的):

    https://jsfiddle.net/jamygolden/yUG5U/2/

    示例标记:

    <svg id="svg-image-blur">
        <image x="0" y="0" id="svg-image" width="300" height="200" xlink:href="http://path/to.your/image.jpg" />
    
        <filter id="blur-effect-1">
            <feGaussianBlur stdDeviation="2" />
        </filter>
    </svg>
    

    CSS:

    #svg-image-blur { height: 200px; width: 300px; }
    #svg-image:hover { filter:url(#blur-effect-1); }
    

    【讨论】:

      【解决方案3】:

      使用背景滤镜,现在很多浏览器都支持:

      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);    
      

      【讨论】:

      • 被低估且完美!
      【解决方案4】:

      css 模糊会起作用吗?

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

      【讨论】:

      • 不,这是关于模糊背后的东西。
      猜你喜欢
      • 2019-07-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-08-05
      相关资源
      最近更新 更多