HTML5 JS实现毛玻璃效果（高斯模糊）

最新推荐文章于 2024-08-23 10:12:51 发布
最新推荐文章于 2024-08-23 10:12:51 发布
阅读量5.2w 收藏 41
点赞数 12
分类专栏： HTML5 文章标签： html5 javascript css3 canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010852544/article/details/43967749
版权

苹果IOS系统的毛玻璃效果非常绚丽，自己也想在HTML5中实现同样的效果

css3中可以使用blur来实现这种效果：

.blur {    
    -webkit-filter: blur(10px);
       -moz-filter: blur(10px);
        -ms-filter: blur(10px);    
            filter: blur(10px);    
}
但是使用这种方法得出来的效果不理想(比如图片模糊后四周缩小)，而且不能局部控制图片


为了解决CSS3的缺陷，我们可以使用HTML5的canvas，用过photoshop的人一定知道里面有个高斯模糊功能，其实我们要做的就是用代码实现图片的高斯模糊转换，canvas中的getImageData方法获取图片像素信息，然后写相应的算法对图片像素进行转换

对高斯模糊的转换算法感兴趣的可以参考这篇文章----点击打开链接

如果对这个算法实现不感兴趣，也可以用前人已经实现的JS类库StackBlur.js，毕竟前人栽树后人乘凉嘛。



这样高斯模糊效果不但非常理想，而且可以局部模糊图片


以下是测试代码：

index.html文件

<!doctype>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
	<script src="js/StackBlur.js" type="text/javascript"></script>
</head>
<body>
<img src='img/360wallpaper.jpg'  id='BgImg' />
	<div id='main'>
	</div>
	<canvas id='canvas' ></canvas>
</body>
<script>
//拖动
function change(obj,moves) 
{
		moves.οnmοusedοwn=function(ev)
		{	
			
			var disx=0;
			var disy=0;
			var oev=ev||event;
			
			disx=oev.clientX-obj.offsetLeft;
			disy=oev.clientY-obj.offsetTop;
			document.οnmοusemοve=function(ev)
			{


				var oev=ev||event;
				var l=oev.clientX-disx; //DIV x轴位置
				var t=oev.clientY-disy;	//DIV y轴位置
				if(l<0)
				{
					l=0;
				}  
				else if(l>document.documentElement.clientWidth-obj.offsetWidth)
				{
					l=document.documentElement.clientWidth-obj.offsetWidth;
				}
				if(t<0)
				{
					t=0;
				}




				obj.style.left=l+"px";
				obj.style.top=t+"px";
				Blur();
			}


			document.οnmοuseup=function()
			{
				Blur();
				document.οnmοusemοve=null;
				document.οnmοuseup=null;


			}
			return false; //组织默认事件 
		}
			






}
function Blur(){
		
		stackBlurImage( 'BgImg', 'canvas', 32,'main' );
}
window.οnlοad=function(){
	
	var aa = document.getElementById("canvas");
	var bb = document.getElementById("main");
	change(bb,bb);


}
	
</script>
</html>
<pre name="code" class="html">

StackBlur.js文件

 

 

var mul_table = [
        512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,
        454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,
        482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,
        437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,
        497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,
        320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,
        446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,
        329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,
        505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,
        399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,
        324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,
        268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,
        451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,
        385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,
        332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,
        289,287,285,282,280,278,275,273,271,269,267,265,263,261,259];
        
   
var shg_table = [
	     9, 11, 12, 13, 13, 14, 14, 15, 15, 15, 15, 16, 16, 16, 16, 17, 
		17, 17, 17, 17, 17, 17, 18, 18, 18, 18, 18, 18, 18, 18, 18, 19, 
		19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 20, 20, 20,
		20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 21,
		21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21,
		21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 22, 22, 22, 22, 22, 22, 
		22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22,
		22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 22, 23, 
		23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
		23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23,
		23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 
		23, 23, 23, 23, 23, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 
		24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
		24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
		24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24,
		24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24 ];

function stackBlurImage( imageID, canvasID, radius,maindiv )
{
			
 	var img = document.getElementById( imageID );
	var canvas = document.getElementById( canvasID );
    var mainDiv = document.getElementById( maindiv );
    
	 var oMainH = $(mainDiv).height();
	 var oMainW = $(mainDiv).width();
	 var oMainL = $(mainDiv).offset().left;
	 var oMainT = $(mainDiv).offset().top;

	 canvas.style.width  = oMainW + "px";
	 canvas.style.height = oMainH + "px";
	 canvas.width = oMainW;
	 canvas.height = oMainH;
	 canvas.style.left = oMainL + "px";
	 canvas.style.top = oMainT + "px";
    
     var context = canvas.getContext("2d");
     context.clearRect( 0, 0, oMainW, oMainH );

	 context.drawImage( img,oMainL,oMainT,oMainW,oMainH, 0, 0 ,oMainW,oMainH );
		

	if ( isNaN(radius) || radius < 1 ) return;
	
	stackBlurCanvasRGBA( canvasID, 0, 0, oMainW, oMainH, radius );
	
}


function stackBlurCanvasRGBA( id, top_x, top_y, width, height, radius )
{
	if ( isNaN(radius) || radius < 1 ) return;
	radius |= 0;
	
	var canvas  = document.getElementById( id );
	var context = canvas.getContext("2d");
	var imageData;
	
	try {
	  try {
		imageData = context.getImageData( top_x, top_y, width, height );
	  } catch(e) {
	  
		// NOTE: this part is supposedly only needed if you want to work with local files
		// so it might be okay to remove the whole try/catch block and just use
		// imageData = context.getImageData( top_x, top_y, width, height );
		try {
			netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
			imageData = context.getImageData( top_x, top_y, width, height );
		} catch(e) {
			alert("Cannot access local image");
			throw new Error("unable to access local image data: " + e);
			return;
		}
	  }
	} catch(e) {
	  alert("Cannot access image");
	  throw new Error("unable to access image data: " + e);
	}
			
	var pixels = imageData.data;
			
	var x, y, i, p, yp, yi, yw, r_sum, g_sum, b_sum, a_sum, 
	r_out_sum, g_out_sum, b_out_sum, a_out_sum,
	r_in_sum, g_in_sum, b_in_sum, a_in_sum, 
	pr, pg, pb, pa, rbs;
			
	var div = radius + radius + 1;
	var w4 = width << 2;
	var widthMinus1  = width - 1;
	var heightMinus1 = height - 1;
	var radiusPlus1  = radius + 1;
	var sumFactor = radiusPlus1 * ( radiusPlus1 + 1 ) / 2;
	
	var stackStart = new BlurStack();
	var stack = stackStart;
	for ( i = 1; i < div; i++ )
	{
		stack = stack.next = new BlurStack();
		if ( i == radiusPlus1 ) var stackEnd = stack;
	}
	stack.next = stackStart;
	var stackIn = null;
	var stackOut = null;
	
	yw = yi = 0;
	
	var mul_sum = mul_table[radius];
	var shg_sum = shg_table[radius];
	
	for ( y = 0; y < height; y++ )
	{
		r_in_sum = g_in_sum = b_in_sum = a_in_sum = r_sum = g_sum = b_sum = a_sum = 0;
		
		r_out_sum = radiusPlus1 * ( pr = pixels[yi] );
		g_out_sum = radiusPlus1 * ( pg = pixels[yi+1] );
		b_out_sum = radiusPlus1 * ( pb = pixels[yi+2] );
		a_out_sum = radiusPlus1 * ( pa = pixels[yi+3] );
		
		r_sum += sumFactor * pr;
		g_sum += sumFactor * pg;
		b_sum += sumFactor * pb;
		a_sum += sumFactor * pa;
		
		stack = stackStart;
		
		for( i = 0; i < radiusPlus1; i++ )
		{
			stack.r = pr;
			stack.g = pg;
			stack.b = pb;
			stack.a = pa;
			stack = stack.next;
		}
		
		for( i = 1; i < radiusPlus1; i++ )
		{
			p = yi + (( widthMinus1 < i ? widthMinus1 : i ) << 2 );
			r_sum += ( stack.r = ( pr = pixels[p])) * ( rbs = radiusPlus1 - i );
			g_sum += ( stack.g = ( pg = pixels[p+1])) * rbs;
			b_sum += ( stack.b = ( pb = pixels[p+2])) * rbs;
			a_sum += ( stack.a = ( pa = pixels[p+3])) * rbs;
			
			r_in_sum += pr;
			g_in_sum += pg;
			b_in_sum += pb;
			a_in_sum += pa;
			
			stack = stack.next;
		}
		
		
		stackIn = stackStart;
		stackOut = stackEnd;
		for ( x = 0; x < width; x++ )
		{
			pixels[yi+3] = pa = (a_sum * mul_sum) >> shg_sum;
			if ( pa != 0 )
			{
				pa = 255 / pa;
				pixels[yi]   = ((r_sum * mul_sum) >> shg_sum) * pa;
				pixels[yi+1] = ((g_sum * mul_sum) >> shg_sum) * pa;
				pixels[yi+2] = ((b_sum * mul_sum) >> shg_sum) * pa;
			} else {
				pixels[yi] = pixels[yi+1] = pixels[yi+2] = 0;
			}
			
			r_sum -= r_out_sum;
			g_sum -= g_out_sum;
			b_sum -= b_out_sum;
			a_sum -= a_out_sum;
			
			r_out_sum -= stackIn.r;
			g_out_sum -= stackIn.g;
			b_out_sum -= stackIn.b;
			a_out_sum -= stackIn.a;
			
			p =  ( yw + ( ( p = x + radius + 1 ) < widthMinus1 ? p : widthMinus1 ) ) << 2;
			
			r_in_sum += ( stackIn.r = pixels[p]);
			g_in_sum += ( stackIn.g = pixels[p+1]);
			b_in_sum += ( stackIn.b = pixels[p+2]);
			a_in_sum += ( stackIn.a = pixels[p+3]);
			
			r_sum += r_in_sum;
			g_sum += g_in_sum;
			b_sum += b_in_sum;
			a_sum += a_in_sum;
			
			stackIn = stackIn.next;
			
			r_out_sum += ( pr = stackOut.r );
			g_out_sum += ( pg = stackOut.g );
			b_out_sum += ( pb = stackOut.b );
			a_out_sum += ( pa = stackOut.a );
			
			r_in_sum -= pr;
			g_in_sum -= pg;
			b_in_sum -= pb;
			a_in_sum -= pa;
			
			stackOut = stackOut.next;

			yi += 4;
		}
		yw += width;
	}

	
	for ( x = 0; x < width; x++ )
	{
		g_in_sum = b_in_sum = a_in_sum = r_in_sum = g_sum = b_sum = a_sum = r_sum = 0;
		
		yi = x << 2;
		r_out_sum = radiusPlus1 * ( pr = pixels[yi]);
		g_out_sum = radiusPlus1 * ( pg = pixels[yi+1]);
		b_out_sum = radiusPlus1 * ( pb = pixels[yi+2]);
		a_out_sum = radiusPlus1 * ( pa = pixels[yi+3]);
		
		r_sum += sumFactor * pr;
		g_sum += sumFactor * pg;
		b_sum += sumFactor * pb;
		a_sum += sumFactor * pa;
		
		stack = stackStart;
		
		for( i = 0; i < radiusPlus1; i++ )
		{
			stack.r = pr;
			stack.g = pg;
			stack.b = pb;
			stack.a = pa;
			stack = stack.next;
		}
		
		yp = width;
		
		for( i = 1; i <= radius; i++ )
		{
			yi = ( yp + x ) << 2;
			
			r_sum += ( stack.r = ( pr = pixels[yi])) * ( rbs = radiusPlus1 - i );
			g_sum += ( stack.g = ( pg = pixels[yi+1])) * rbs;
			b_sum += ( stack.b = ( pb = pixels[yi+2])) * rbs;
			a_sum += ( stack.a = ( pa = pixels[yi+3])) * rbs;
		   
			r_in_sum += pr;
			g_in_sum += pg;
			b_in_sum += pb;
			a_in_sum += pa;
			
			stack = stack.next;
		
			if( i < heightMinus1 )
			{
				yp += width;
			}
		}
		
		yi = x;
		stackIn = stackStart;
		stackOut = stackEnd;
		for ( y = 0; y < height; y++ )
		{
			p = yi << 2;
			pixels[p+3] = pa = (a_sum * mul_sum) >> shg_sum;
			if ( pa > 0 )
			{
				pa = 255 / pa;
				pixels[p]   = ((r_sum * mul_sum) >> shg_sum ) * pa;
				pixels[p+1] = ((g_sum * mul_sum) >> shg_sum ) * pa;
				pixels[p+2] = ((b_sum * mul_sum) >> shg_sum ) * pa;
			} else {
				pixels[p] = pixels[p+1] = pixels[p+2] = 0;
			}
			
			r_sum -= r_out_sum;
			g_sum -= g_out_sum;
			b_sum -= b_out_sum;
			a_sum -= a_out_sum;
		   
			r_out_sum -= stackIn.r;
			g_out_sum -= stackIn.g;
			b_out_sum -= stackIn.b;
			a_out_sum -= stackIn.a;
			
			p = ( x + (( ( p = y + radiusPlus1) < heightMinus1 ? p : heightMinus1 ) * width )) << 2;
			
			r_sum += ( r_in_sum += ( stackIn.r = pixels[p]));
			g_sum += ( g_in_sum += ( stackIn.g = pixels[p+1]));
			b_sum += ( b_in_sum += ( stackIn.b = pixels[p+2]));
			a_sum += ( a_in_sum += ( stackIn.a = pixels[p+3]));
		   
			stackIn = stackIn.next;
			
			r_out_sum += ( pr = stackOut.r );
			g_out_sum += ( pg = stackOut.g );
			b_out_sum += ( pb = stackOut.b );
			a_out_sum += ( pa = stackOut.a );
			
			r_in_sum -= pr;
			g_in_sum -= pg;
			b_in_sum -= pb;
			a_in_sum -= pa;
			
			stackOut = stackOut.next;
			
			yi += width;
		}
	}
	
	context.putImageData( imageData, top_x, top_y );
	
}

function BlurStack()
{
	this.r = 0;
	this.g = 0;
	this.b = 0;
	this.a = 0;
	this.next = null;
}

 

 

 

 

 

 

 

index.css文件
 

 
  
 
body{
background:#000000;

overflow:hidden;
}
#BgImg{
position:absolute;
z-index:-100;
}
#main{

width:700px;
height:700px;
color:#ffffff;
position:absolute;
z-index:12;
left:150px;
top:30px;

border-radius:1px;
box-shadow:-1px -1px 4px rgba(115,115,115,0.6) inset,
			1px 1px 4px rgba(115,115,115,0.6) inset
;
}
#canvas{
z-index:1;
position:absolute;

}
 
 
 这个是源码 

 


  http://download.csdn.net/detail/u010852544/8611371 
 
 

 


  因为HTML5的某些函数安全需要，这个demo要放在服务器环境下使用 

 

 


 
 


 
 


 

                

        

        

    

  


    

      

        

            

              
                
                  一片枫叶o
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
CSS3过渡练习-进度条（CSS3）

				
			

			

				

					...
				

				

					08-15
					
					413
					
				

			

		

		

			
				
CSS3过渡练习-进度条（CSS3）
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">


			
		

	



                

              
                



	

		

			

				
					
HTML5毛玻璃

				
			

			

				

					04-20
				

			

		

		

			
				
HTML5做的一个毛玻璃demo，由于用到了getImageData等函数，需要在服务器环境下使用

			
		

	



                


  
              

                


	

		

			

				
					
HTML+CSS 动画毛玻璃按钮，带展开效果

					
最新发布

				
			

			

				

					我们好像在哪见过 私
				

				

					08-23
					
					473
					
				

			

		

		

			
				
🌟在网页设计中，按钮不仅仅是用户界面的一个简单组成部分，它还能够通过视觉效果增强用户体验和美感。CSS动画酷炫毛玻璃按钮展开效果是一种创新的交互设计，它结合了流行的毛玻璃美学和动态动画，为按钮添加了深度和动感。

			
		

	





	

		

			

				
					
js实现的图片模糊毛玻璃js特效

				
			

			

				

					ICode联盟
				

				

					08-12
					
					779
					
				

			

		

		

			
				
js实现的图片模糊特效，类似毛玻璃效果。通过简单的配置，既可以生成非常炫酷的半透明模糊的毛玻璃效果。

			
		

	



		

			
		



	

		

			

				
					
动态毛玻璃特效html,js和CSS3炫酷毛玻璃面板特效

				
			

			

				

					weixin_36411269的博客
				

				

					06-04
					
					567
					
				

			

		

		

			
				
Frosted Panel 是一款使用js编写的炫酷毛玻璃特效插件。您通过简单的配置，既可以生成非常炫酷的半透明模糊的毛玻璃效果。使用方法在HTML文件中引入。HTML结构创建HTML结构并使用下面的属性来配置毛玻璃效果。ALL PANEL CONTENT GOES HEREpanel-dimensions：宽度和高度。breakpoint-type：min-width 或 max-width。b...

			
		

	





	

		

			

				
					
css加简单的JavaScript做出毛玻璃效果

				
			

			

				

					qq_41463883的博客
				

				

					10-16
					
					1863
					
				

			

		

		

			
				
最主要的技术很简单，只要了解css的滤镜（filter），这里用的是里面的blur属性。效果图：

　　想要模糊效果基本上添加上filter这个属性就会有的，但它会连文字一起模糊，且让背景图片透过半透明的盒子显示出来，色彩已经和背景有很大区别了，像一块没擦干净的玻璃。
因此：
　　1.对要添加模糊效果的元素单独增加一层，模糊层和文字分离使文字不模糊。　
　　 2.模糊层放入和最外层相同的背景，直接...

			
		

	





	

		

			

				
					
一次H5毛玻璃效果有感

				
			

			

				

					weixin_30747253的博客
				

				

					05-21
					
					436
					
				

			

		

		

			
				
印象中H5实现毛玻璃效果是挺好实现的，主要的代码就是css的filter:blur。
之前也用过几次，给背景图加高斯模糊啊，给一个div加高斯模糊啊。只要给需要添加高斯模糊的元素直接添加filter属性就好了，
但是今天遇到了一个需求，暂时无法解决很是灰心。

需求是给tabbar添加高斯模糊，开始一想简单啊，也是直接给tabbar的容器添加filter不就行了么？可想而知，并没有这么简...

			
		

	





	

		

			

				
					
HTML5 实现背景图片毛玻璃模糊特效.zip

				
			

			

				

					11-03
				

			

		

		

			
				
毛玻璃效果，也被称为高斯模糊或者iOS7风格的模糊效果，近年来在网页设计中变得非常流行，因为它可以为界面增添一种优雅而现代的视觉体验。  要实现这样的特效，主要涉及HTML5的Canvas元素以及CSS3的一些属性。...

			
		

	





	

		

			

				
					
jQuery+CSS3实现带毛玻璃效果的模糊背景遮挡特效源码.zip

				
			

			

				

					11-17
				

			

		

		

			
				
 - 毛玻璃效果，也称为“高斯模糊”，通常是在模糊基础上增加一种不透明度，使背景看起来更像透过磨砂玻璃看到的景象。这可以通过CSS的`opacity`或`rgba()`函数来控制透明度。  - 在CSS3中，可以结合`blur`和`...

			
		

	





	

		

			

				
					
canvas 实现图片局部模糊_Canvas模糊化处理图片、毛玻璃处理图片之stackblur.js

				
			

			

				

					weixin_39914049的博客
				

				

					01-12
					
					713
					
				

			

		

		

			
				
Canvas实现毛玻璃效果解决方式1：使用stackblur.js在Android系统中实现图片的毛玻璃效果比较好用的类库是：Android StackBlur简单API说明：API 调用下面是针对不同的源(图片或者 Canvas 等)进行 StackBlur 的调用。图像作为源:StackBlur.image(sourceImage, targetCanvas, radius, blurAlph...

			
		

	





	

		

			

				
					
CSS毛玻璃效果

				
			

			

				

					12-21
				

			

		

		

			
				
本文将深入探讨如何使用CSS来实现毛玻璃效果，以及如何进行浏览器兼容性的处理。  首先，CSS毛玻璃效果的核心是使用`filter`属性，特别是`blur()`函数。`blur()`函数可以对元素的背景图像或颜色应用高斯模糊，创建出...

			
		

	





	

		

			

				
					
html5实现毛玻璃模糊效果 Aero风格

				
			

			

				

					06-09
				

			

		

		

			
				
html5分别使用css3和canvas实现毛玻璃模糊效果 Aero风格

			
		

	





	

		

			

				
					
HTML毛玻璃效果代码

				
			

			

				

					03-27
				

			

		

		

			
				
毛玻璃效果火狐不支持其他浏览器都没问题。RAR包含1个说明TXT跟4个文件夹。每个文件夹分别包含html文件、css文件跟js文件各一个。1个模板代码跟3个演示代码。

			
		

	





	

		

			

				
					
canvas-blur:通过canvas实现毛玻璃效果

				
			

			

				

					07-07
				

			

		

		

			
				
canvas-blur
通过canvas实现毛玻璃效果
Fabio Sasso制作过一个事例使用了
html2canvas 0.4.1 (js截图库）
Stackblur        （图片模糊处理）
完成了一个半透明的导航栏 
对比通过CSS的改进实现毛玻璃的效果 
（image.css 是一个通过base64加密过得图片，可以实现毛玻璃的那种粗糙效果）

			
		

	





	

		

			

				
					
CSS3 毛玻璃效果

				
			

			

				

					12-14
				

			

		

		

			
				
毛玻璃效果做的好能使页面显得非常生动立体。直接上图


body {
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding-top: calc(50vh - 6em);
    font: 150%/1.6 serif;
    background: url("iphone.jpg") fixed 0 center;
    background-size: cover;
}
main {
    margin: 0 auto;
    padding: 1em;
    max-width

			
		

	





	

		

			

				
					
CSS3毛玻璃效果-兼容IE-来自明锋工作室

				
			

			

				

					05-06
				

			

		

		

			
				
这是一个css3模糊演示效果，几行css代码即可实现。除了在firefox、chrome、opera下完美显示，同时提供兼容IE的方法。
可以用于传统PC端，移动端更没问题。
关注明锋工作室，关注UI设计和web前端开发。

			
		

	





	

		

			

				
					
Unity 如何实现苹果动态模糊遮罩

				
			

			

				

					TxNet
				

				

					07-24
					
					2091
					
				

			

		

		

			
				
前言
使用过苹果手机的都知道，苹果手机在上banner滑下来的时候，会有一个动态模糊的透明背景，其实就是一个毛玻璃效果，用户可以看到毛玻璃下面的应用或者列表，依然时活动的状态，这就是我说的苹果的动态模糊效果。见下图
1.实现原理
先说原理，要实现一个动态模糊的遮罩，主要有两个技术难点。
1.模糊效果：模糊的效果肯定是使用shader，有一种模糊大家应该都听说过，那就是’'高斯模糊"，高斯模糊的算法是一个最长常用的模糊图像算法，因为高斯模糊的效果非常的好。
2.动态遮罩：动态遮罩，什么意思呢？就是说，我们有一

			
		

	





	

		

			

				
					
H5+CSS3 背景图毛玻璃效果实现方案

				
			

			

				

					qq_37750365的博客
				

				

					11-17
					
					1941
					
				

			

		

		

			
				
方案一、<img> + filter: blur()


<div class="container">
    <img class="background" src="./image/index.png">
</div>
<style>
    .background {
        width: 100px;
        height: auto;
        filter: blur(20px);
    }
</styl

			
		

	





	

		

			

				
					
HTML5canvas实现高斯模糊、刮刮乐

				
			

			

				

					zyz00000000的博客
				

				

					09-16
					
					1673
					
				

			

		

		

			
				
1.高斯模糊（Gaussian blur）

原理：将图片插入到canvas中，将canvas中的图片，getImageData得到图片的像素值，用高斯模糊函数进像素值进行处理后，再把值putImageData放到canvas中，就实现了图片的高斯模糊处理。

高斯模糊函数中的逻辑：

注意：此处是window整个页面进行加载，不可以用img来调用onload方法，会报错：高斯函数未被定义的错误。...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值