以Path为代表的，展示了这种背景图模糊并全屏显示的方法，而且会根据屏幕分辨率放大缩小。
这种效果应该怎么实现呢？
高斯模糊是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内核的浏览器支持，并且资源占用较大。如果要兼容，也只有把图片先高斯模糊了。
-webkit-filter: blur(10px)
模糊可以使用 canvas 来实现.
blur(document.getElementById('logo'),'/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;
}
代码未测试。思路大概是这样。
如果觉得《css背景图片高斯模糊_如何将网页CSS背景图高斯模糊且全屏显示》对你有帮助，请点赞、收藏，并留下你的观点哦！
