如何使用CSS(和JavaScript?)创建一个模糊,“磨砂”背景? [英] How to use CSS (and JavaScript?) to create a blurred, "frosted" background?
问题描述
我试图用HTML5,CSS3和JavaScript创建一个iOS 7风格的磨砂外观,可以在webkit浏览器上工作。
I'm trying to create an iOS 7 style frosted look with HTML5, CSS3 and JavaScript which can work on webkit browsers.
从技术上讲,
<style>
#partial-overlay {
width: 100%;
height: 20px;
background: rgba(255, 255, 255, .2); /* TODO frost */
position: fixed;
top: 0;
left: 0;
}
</style>
<div id="main-view">
<div style="width: 50px; height: 50px; background: #f00"></div>
To my left is a red box<br>
Now there is just text<br>
Text that goes on for a few pixels <br>
or even more
</div>
<div id="partial-overlay">
Here is some content
</div>
我想要应用类似 -webkit-filter:blur (5px)
水平到#main-view
。
I'd like to apply something like a -webkit-filter: blur(5px)
to the first 20px horizontally of #main-view
.
CSS被修改为#partial-overlay {width:20px;高度:100%; ...}
然后我需要应用 -webkit-filter:blur(5px)
垂直第一个20px。
If the CSS was modified to be #partial-overlay { width: 20px; height: 100%; ...}
then I'd need to apply the -webkit-filter: blur(5px)
to the first 20px vertically.
显而易见的解决方案是使用javascript来克隆#main-view
,设置 overflow:hidden
然后根据需要更改宽度/高度,但似乎难以推广到更复杂的页面/ CSS结构。
The obvious solution is to use javascript to make a clone of the #main-view
, set overflow: hidden
and then change the width/height as appropriate but that seems to me hard to generalize to more complex pages/CSS structures.
有没有更好的方法来实现这个最小的性能和最大的可泛化性?
Is there a better way to achieve this with minimal performance hit and maximal generalizability?
EDIT :这是一个例子,实现:
EDIT: Here is an example of what I'm trying to achieve:
推荐答案
感谢您的灵感...它带给我这个 canvas插件,窍门
Thanks for the inspiration... It led me to this canvas plugin which does the trick
新增和改进: -webkit-和Firefox工作示例 现在可调整大小/流畅。
New and Improved: -webkit- and Firefox Working Example, now re-sizable/fluid.
JS
$(document).ready(function () {
frost = function () {
var w = $('#main-view').width();
html2canvas(document.body, {
onrendered: function (canvas) {
document.body.appendChild(canvas);
$('canvas').wrap('<div id="contain" />');
},
width: w,
height: 30
});
$('canvas, #partial-overlay, #cover').hide();
$('#cover').fadeIn('slow', function () {
$('#partial-overlay').fadeIn('slow');
});
};
$('body').append('<div id="cover"></div><svg id="svg-image-blur"><filter id="blur-effect-1"><feGaussianBlur stdDeviation="2"/></filter></svg>');
$('#main-view').click(function () {
frost();
$('#partial-overlay').addClass('vis');
$(window).resize(function () {
$('canvas, #partial-overlay, #cover').hide();
});
function onResize() {
if ($('#partial-overlay').hasClass('vis')) {
frost();
}
}
var timer;
$(window).bind('resize', function () {
timer && clearTimeout(timer);
timer = setTimeout(onResize, 50);
});
});
$('#partial-overlay').click(function () {
$('#partial-overlay').removeClass('vis');
$('canvas, #partial-overlay, #cover').hide();
});
});
CSS
#main-view {
width:75%;
height:50%;
box-sizing: border-box;
margin:8px;
}
#partial-overlay {
display:none;
width: 100%;
height: 20px;
position: absolute;
top: 0;
left: 0;
z-index:99;
background: rgba(255, 255, 255, 0.2);
cursor:pointer;
}
canvas {
position: absolute;
top: 0;
left: 0;
-webkit-filter:blur(5px);
filter: url(#blur-effect-1);
}
#cover {
display:none;
height:19px;
width:100%;
background:#fff;
top:0;
left:0;
position:absolute;
}
#contain {
height:20px;
width:100%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
svg {
height:0;
width:0;
}
HTML
<div id="main-view">
<div style="width: 10%; height: 20%; background: #f00; float: left"></div>To my left is a red box
<br>Now there is just text
<br>Text that goes on for a few pixels
<br>or even more</div>
<div id="partial-overlay">Here is some content</div>
我把它放在一个点击函数,因为我认为这将是最可能的用例。
I put it in a click function, because I figured it would be the most likely use case. It will work just as well on document ready.
尽管画布表示不像素完美,但我认为在大多数情况下它并不重要,因为它的模糊。
Although the canvas representation wont be pixel perfect, I don't think it will really matter in most cases because its being blurred.
更新:根据要求,现在可以调整大小。我也把cover div移动到JS中,并为Firefox添加了一个svg。调整大小需要在每次调整大小时重新绘制画布,因此在调整大小时将其设置为隐藏画布,叠加层等,然后在调整大小时将其替换。
Update: As requested this is now re-sizable. I also moved the cover div into the JS and added an svg fall back for Firefox. The resizing requires the canvas to be redrawn on each re-size, so I set it up to hide the canvas, overlay, etc while you're resizing and then replace it when the re-size stops.
这篇关于如何使用CSS(和JavaScript?)创建一个模糊,“磨砂”背景?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!