gpt4 book ai didi

CSS3/HTML 5/PNG 模糊元素后面的内容

转载 作者:太空宇宙 更新时间:2023-11-03 17:56:16 25 4
gpt4 key购买 nike

我正在尝试模糊固定位置标题后面的内容,以便用户滚动时它后面的内容在这个 div 后面时变得模糊。

我曾经在 CSS 中使用简单的不透明度来实现这一点,但这并没有使 DIV 后面的内容变蓝,只是在它前面强加了一个半透明面板。

有没有一种简单的方法,即使它是实现我所追求的目标的欺骗。无论是使用 PNG 背景图像还是在 CSS 中。

看看 iOS7 是如何做到这一点的 http://www.apple.com/ios/ios7/features/ .

最佳答案

有了一点 HTML5 和 JavaScript 魔法,答案是肯定的:

http://jsfiddle.net/nallenscott/WtQjY/41/

稻草人:

<body>
<section>
<article>
<header></header>
<div class="blurheader"></div>

<!-- content-->

</article>
</section>
</body>

你需要 jQuery , Stackblur , 和 html2canvas .

  1. 复制内容区域并将其转换为 Canvas 。

  2. 将 Canvas 移动到页眉。

  3. 将内容的滚动与页眉中的 Canvas 同步。

    html2canvas 创建 Canvas ,Stackblur 在 Canvas 上创建高斯模糊,header 元素分层在 .blurheader div 上以模拟半透明。

如果您熟悉 JavaScript,那么这可能值得进一步研究。它支持最新版本的 IE、Chrome、Safari 和 Firefox,并允许为旧版浏览器提供优雅的回退选项。

干杯。

关于CSS3/HTML 5/PNG 模糊元素后面的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26253730/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com