如何使用CSS (和JavaScript?)来创造一个模糊的，“磨砂的”背景？
我正在尝试用HTML5，CSS3和JavaScript创建一个iOS 7风格的磨砂外观，可以在webkit浏览器上运行。
从技术上讲，给定以下HTML：
<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>我想在#main-view的第一个20px水平方向上应用类似于-webkit-filter: blur(5px)的东西。
如果CSS被修改为#partial-overlay { width: 20px; height: 100%; ...}，那么我需要将-webkit-filter: blur(5px)垂直应用于前20px。
显而易见的解决方案是使用javascript克隆#main-view，设置overflow: hidden，然后适当地更改宽度/高度，但在我看来，这似乎很难推广到更复杂的页面/CSS结构。
有没有更好的方法来实现这一点，同时将性能影响降到最低，并最大限度地提高泛化能力？
编辑：下面是我尝试实现的一个示例：
回答 10
Stack Overflow用户
发布于 2013-06-16 23:23:42
谢谢你的启发。它将我带到了这个canvas plugin，它可以做到这一点
新的和改进的： ，现在可重新调整大小/流体。
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>我把它放在一个click函数中，因为我认为这是最有可能的用例。它在文档准备好的情况下也会工作得很好。
尽管画布表示不会是像素完美的，但我认为在大多数情况下这并不重要，因为它是模糊的。
更新：根据请求，现在可以重新调整大小。我还将封面div移到了JS中，并为Firefox添加了一个svg回退。调整大小需要在每次调整大小时重新绘制画布，所以我将其设置为在您调整大小时隐藏画布、覆盖等，然后在调整大小停止时替换它。
Stack Overflow用户
发布于 2013-09-24 06:24:57
基本上你可以有一个覆盖占位符，你可以在其中复制主要内容并同步两个div的滚动，然后只在覆盖上应用css模糊过滤器。
一个简单的javascript就可以了：
$(document).ready(function(){
$('.overlay').append( $('.content').html() );
$('.content').on('scroll', function(){
$('.overlay').scrollTop($(this).scrollTop());
});
});对于CSS：
.overlay {
overflow:hidden;
-webkit-filter: blur(.25em);
background:#fff;
}我为您整理了一个工作示例(仅限webkit)：
玩得开心！:)
Stack Overflow用户
发布于 2013-06-16 13:58:35
有没有更好的方法来实现这一点，同时将性能影响降到最低，并最大限度地提高泛化能力？
这个问题的答案是no。
原因是，为了做你想做的事情，你需要直接访问用于浏览器窗口的位图，以提取或操作你想要模糊的区域中的像素(我希望，浏览器中的"aero“看起来会非常整洁。)或者一个过滤器，它作用于所应用的元素后面的元素(或者可以为其设置一个限制区域)。
由于没有本机支持(除了画布和扩展API，或者从html ->生成画布图像的库相对较慢)，这将需要使用技巧(图像，分割div等)来完成。不管是哪种情况。
如果你把页面中的所有东西都放在画布上，你可以做很多有趣的事情，但你也需要自己进行布局、更新、过滤等等，因此你就不会回到没有优化的地方，因为Javascript比原生的慢(更不用说它容易出错)。
直到浏览器允许你抓取窗口的一部分作为画布(从不？因为这将要求页面上的所有内容都是同源的，或者具有设置了特殊接受标头的内容)，因此别无选择，只能变戏法。
更新
作为一个演示，您可以使用html2canvas等，但必须使用折衷(->慢性能)-演示是粗糙的，实验性的，需要调整才能很好地工作-但仅用于演示：
http://jsfiddle.net/AbdiasSoftware/RCaLR/
结果：
获取部分背景的广义函数：
getBlurredBG(x, y, width, height, id);使用html2canvas获取部分窗口：
function getBlurredBG(x, y, w, h, id) {
html2canvas(document.body, {
onrendered: function (canvas) {
process(canvas, x, y, w, h, id);
},
width: (x + w),
height: (y + h)
});
}处理内容：
function process(canvas, x, y, w, h, id) {
//create new canvas to enable clipping
//As html2canvas returns a canvas from 0,0 to width and height
//we need to clip it.
var ocanvas = document.createElement('canvas');
ocanvas.width = w;
ocanvas.height = h;
ocanvas.style.left = x + 'px';
ocanvas.style.top = y + 'px';
ocanvas.style.position = 'absolute';
ocanvas.id = id;
var ctx = ocanvas.getContext('2d');
ctx.drawImage(canvas, x, y, w, h,
0, 0, w, h);
stackBlurCanvasRGB(ocanvas, x, y, w, h, 28)
lighten(ocanvas);
ctx.fillStyle = 'rgba(255,255,255,0.5)';
ctx.fillRect(x, y, w, h);
ctx.fillStyle = '#999';
ctx.font = '32px arial';
ctx.fillText("Partial overlay content", 10, 60);
document.body.appendChild(ocanvas);
}https://stackoverflow.com/questions/17092299
复制相似问题
腾讯云开发者
