blur(document.getElementById('logo'),'http://s.segmentfault.com/img/logo.png',2); function blur(element, src, strength){ var image = new Image(); image.onload = function(e){ var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = this.width; canvas.height = this.height; context.drawImage(this, 0, 0); context.globalAlpha = 0.5; // Higher alpha made it more smooth // Add blur layers by strength to x and y // 2 made it a bit faster without noticeable quality loss for (var y = -strength; y <= strength; y += 2) { for (var x = -strength; x <= strength; x += 2) { context.drawImage(canvas, x, y); } } context.globalAlpha = 1; element.style.backgroundImage = 'url('+canvas.toDataURL()+')'; } image.src = src; }
高斯模糊是PS、FW图片处理工具搞的。
全屏显示的方法
1：使用CSS
.bg { background-image:url(scale.jpg); -moz-background-size: 100% 100%; /* Firefox 3.6 */ -o-background-size: 100% 100%;/* Opera 9.5 */ -webkit-background-size: 100% 100%;/* Safari 3.0 */ background-size: 100% 100%;/* Firefox 4.0 and other CSS3-compliant browsers */ -moz-border-image: url(scale.jpg) 0; /* Firefox 3.5 */ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='scale.jpg', sizingMethod='scale');/* for < ie9 */ }2：使用 IMG 标签
补充方法3：使用 CSS3 的背景 Cover
.bg { background: #000 url(scale.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }如果不考虑兼容问题，可以参考css3的高斯滤镜。暂时只有webkit内核的浏览器支持，并且资源占用较大。如果要兼容，也只有把图片先高斯模糊了。
模糊可以使用 canvas 来实现.
blur(document.getElementById('logo'),'http://s.segmentfault.com/img/logo.png',2); function blur(element, src, strength){ var image = new Image(); image.onload = function(e){ var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); canvas.width = this.width; canvas.height = this.height; context.drawImage(this, 0, 0); context.globalAlpha = 0.5; // Higher alpha made it more smooth // Add blur layers by strength to x and y // 2 made it a bit faster without noticeable quality loss for (var y = -strength; y <= strength; y += 2) { for (var x = -strength; x <= strength; x += 2) { context.drawImage(canvas, x, y); } } context.globalAlpha = 1; element.style.backgroundImage = 'url('+canvas.toDataURL()+')'; } image.src = src; }代码未测试。思路大概是这样。