CSS3/HTML 5/PNG模糊了元素背后的内容
Rob*_*ght 14 css html5 png blur
我试图模糊固定位置标题后面的内容,以便它背后的内容在这个div后面的用户滚动模糊.
我曾经在CSS中使用简单的不透明度实现了这一点,但这并没有使DIV背后的内容变蓝,只是在它前面加了一个半透明的面板.
是否有一种简单的方法,即使它实现了我所追求的目标.是使用PNG背景图像还是使用CSS.
看一下iOS7的方式http://www.apple.com/ios/ios7/features/.
nal*_*ott 26
使用一点HTML5和JavaScript魔术,答案是肯定的:
http://jsfiddle.net/nallenscott/WtQjY/41/
稻草人:
<body>
<section>
<article>
<header></header>
<div class="blurheader"></div>
<!-- content-->
</article>
</section>
</body>
你需要jQuery,Stackblur和html2canvas.
- 复制内容区域并将其转换为画布.
- 将画布移动到标题.
将内容的滚动与标题中的画布同步.
html2canvas创建画布,在画布上Stackblur创建高斯模糊,并在.blurheaderdiv上分层标题元素以模拟半透明效果.
如果您对JavaScript感到满意,那么这可能值得进一步研究.它支持最新版本的IE,Chrome,Safari和Firefox,并为旧版浏览器提供优雅的后备选项.
干杯.
现在是2015年,Apple发布了Safari 9,它支持新的CSS功能backdrop-filter.使用此CSS规则div仅对您后面的元素应用过滤器:
#myDiv {
backdrop-filter: blur(10px);
}
此功能目前仅在Safari中可用(并且-webkit前缀是其工作所必需的),因此我不建议现在使用它.如果您这样做,请务必使用@supports或/和JS为不支持它的浏览器实现回退:
@supports (backdrop-filter: blur(10px)) {
#myDiv { background: #181818; }
}
这是caniuse.com上的兼容性表,以及Chromium和Firefox功能请求.
详细了解Safari中的新功能.
| 归档时间： |
|
| 查看次数： |
34745 次 |
| 最近记录： |