精华内容
下载资源
问答
  • 实现背景模糊的效果

    2021-04-03 06:57:58
    实现背景模糊的效果,源码BlurryModalSegue,我们知道BlurryModalSegue是UIStoryboardSegue的一个子类的,可以提供事件的模糊的变化效果的,案例中就是实现让背景模糊的Modal View,同时也可以在弹出的Modal View...
  • 滚动时背景模糊

    2015-12-24 16:59:23
    tableView上滚动时背景模糊,下滚时背景清晰
  • CSS3实现模糊背景的三种效果

    万次阅读 多人点赞 2017-10-31 18:58:42
    使用属性:filter:(2px)普通背景模糊为了美观不能使背景前的文字模糊,而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢?我们可以使用伪元素,这样我们也顺便解决了白边的...

    不开头了,直接进入主题。
    普通背景模糊效果如下:
    这里写图片描述

    使用属性:

    filter:(2px)
    

    ####普通背景模糊
    为了美观不能使背景前的文字模糊,而filter属性会使这整个div的后代并且还会出现白边。也就是说无法达到这个效果。怎么办呢?我们可以使用伪元素,这样我们也顺便解决了白边的问题。

    实现思路:
    在父容器中设置背景,并且使用相对定位,方便伪元素重叠。而在:after中只需要继承背景,并且设置模糊,绝对定位覆盖父元素即可。这样父容器中的子元素便可不受模糊度影响。因为伪元素的模糊度不能被父元素的子代继承。
    说了这么多,来点代码提提神。

    简单的html布局:

    <div class="bg">
       <div class="drag">like window</div>
    </div>
    
    

    css:

    /*背景模糊*/
    .bg{
        width:100%;
        height:100%;
        position: relative;
        background: url("../image/banner/banner.jpg") no-repeat fixed;
        padding:1px;
        box-sizing:border-box;
        z-index:1;
    }
    .bg:after{
        content: "";
        width:100%;
        height:100%;
        position: absolute;
        left:0;
        top:0;
        background: inherit;
        filter: blur(2px);
        z-index: 2;
    }
    .drag{
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
        width:200px;
        height:200px;
        text-align: center;
    
        z-index:11;
    }
    
    

    当然,看了上面的代码就能发现父容器下面的子代元素也是要使用绝对定位的,但是这个不会影响到后面的布局的,所以请放心使用(有问题可以找博主麻烦~)。要注意的地方是要使用z-index确定层级关系,必须确保子代元素(也就是这里的drag)是在最上层的。不然子代元素的文字是不会出现的。

    上面的代码还有一个保证div居中的方法,细心的同学应该已经注意到了吧!不使用flex布局的情况下这样居中应该是比较简单的方法了。

    那么这样写代码表现出来的效果是怎么样的呢?

    这里写图片描述

    ####背景局部模糊
    相比较上一个效果而言,背景局部模糊就比较简单了。这时父元素根本就不用设置伪元素为模糊了。直接类比上面的代码把子元素模糊掉,但是子元素的后代可能不能模糊了(这点要注意,解决办法就是上一个效果的描述那样)。
    HTML布局稍微变了一下:

    <div class="bg">
       <div class="drag">
            <div>like window</div>
       </div>
    </div>
    

    css代码如下:(大家注意对比)

    /*背景局部模糊*/
    .bg{
        width:100%;
        height:100%;
        background: url("../image/banner/banner.jpg") no-repeat fixed;
        padding:1px;
        box-sizing:border-box;
        z-index:1;
    }
    .drag{
        margin:100px auto;
        width:200px;
        height:200px;
    
        background: inherit;
    
        position: relative;
    }
    .drag >div{
        width:100%;
        height: 100%;
        text-align: center;
        line-height:200px;
        position: absolute;
        left:0;
        top:0;
        z-index: 11;
    }
    .drag:after{
        content: "";
        width:100%;
        height:100%;
        position: absolute;
        left:0;
        top:0;
        background: inherit;
        filter: blur(15px);/*为了模糊更明显,调高模糊度*/
        z-index: 2;
    }
    
    

    效果如下:
    这里写图片描述

    ####背景局部清晰
    背景局部清晰这个效果说简单也不简单,说难也不难。关键还是要应用好background:inherit属性。这里可不能使用transform让它垂直居中了,大家还是选择flex布局吧。如果这里再使用transform属性的话会让背景也偏移的。这样就没有局部清晰的效果了。
    html布局不变,
    注意看css的变化:

    /*背景局部清晰*/
    .bg{
        width:100%;
        height:100%;
        position: relative;
        background: url("../image/banner/banner.jpg") no-repeat fixed;
        padding:1px;
        box-sizing:border-box;
    }
    .bg:after{
        content: "";
        width:100%;
        height:100%;
        position: absolute;
        left:0;
        top:0;
        background: inherit;
        filter: blur(3px);
        z-index: 1;
    }
    .drag{
        position: absolute;
        left:40%;
        top:30%;
        /*transform: translate(-50%,-50%);*/
        width:200px;
        height:200px;
        text-align: center;
    
        background: inherit;
        z-index:11;
    
        box-shadow:  0 0 10px 6px rgba(0,0,0,.5);
    }
    
    

    效果展示:
    这里写图片描述

    在线演示

    在线演示网站挂掉啦,服务器到期了– 2018年12月17日11:04:24

    **在线求简历~ ** – 2021年03月21日 22:22:24
    在这里插入图片描述

    展开全文
  • 这是一张淡雅背景模糊光晕幻灯片背景图片,第一PPT模板网提供幻灯片背景图片免费下载。 PPT背景图片用几种淡雅模糊的颜色做为幻灯片背景,朦胧的光晕整张PowerPoint背景图片显得异常唯美精致,本张图片适合用来...
  • 这是一张淡雅背景模糊光晕幻灯片背景图片,第一PPT模板网提供幻灯片背景图片免费下载。 PPT背景图片用几种淡雅模糊的颜色做为幻灯片背景,朦胧的光晕整张PowerPoint背景图片显得异常唯美精致,本张图片适合用来...
  • 深挖一下背景模糊效果的三种表现形式: 背景整体模糊 背景局部模糊 背景局部清晰 背景整体模糊: 最近频繁出现一个需求,实现类似于这种效果,背景是商品图模糊后的样子,商品图出现在前面,我第一反应是通过定位...



    深挖一下背景模糊效果的三种表现形式:

    1. 背景整体模糊
    2. 背景局部模糊
    3. 背景局部清晰



    背景整体模糊:

    最近频繁出现一个需求,实现类似于这种效果,背景是商品图模糊后的样子,商品图出现在前面,我第一反应是通过定位position和滤镜filter实现,来看看吧
    在这里插入图片描述

    先定结构有坑点:

      <div class="bg">
            <div class="content">我是内容</div>
      </div>
    

    分析:,如果我们把background和filter直接写在bg上,这样写会使整个div的后代模糊并且还会出现白边,导致页面非常不美观,要想解决这个问题,我们可以使用伪元素因为伪元素的模糊度不会被父元素的子代继承。

    白边:

    在这里插入图片描述

    完整实现:

    <!DOCTYPE html>
    <html lang="zh">
    
    	<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" />
    		<title>Document</title>
    	</head>
    	<style>
    		html,
    		body {
    			width: 100%;
    			height: 100%;
    		}
    		
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		
    		.bg {
    			width: 100%;
    			height: 100%;
    			position: relative;
    			background: url("./2.jpg") no-repeat;
    			background-size: cover;
    		}
    		
    		.bg:after {
    			content: "";
    			width: 100%;
    			height: 100%;
    			position: absolute;
    			left: 0;
    			top: 0;
    			/* 从父元素继承 background 属性的设置 */
    			background: inherit;
    			/*背景模糊*/
    			filter: blur(4px);
    		}
    		
    		.content {
    			position: absolute;
    			left: 50%;
    			top: 50%;
    			transform: translate(-50%, -50%);
    			width: 200px;
    			height: 200px;
    			text-align: center;
    			z-index: 1;
    		}
    	</style>
    	</head>
    
    	<body>
    		<div class="bg">
    			<div class="content">我是清晰的文字</div>
    		</div>
    	</body>
    
    </html>
    

    效果图:
    在这里插入图片描述

    并没有白边:完美
    在这里插入图片描述
    还没完,背景整体模糊整完,来玩玩背景局部模糊

    背景局部模糊

    局部模糊比整体模糊,相对来说就简单很多了,我觉得最关键的一个代码是fixed
    直接上代码:

    <!DOCTYPE html>
    <html lang="zh">
    
    	<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" />
    		<title>Document</title>
    	</head>
    	<Style>
    		html,
    		body {
    			width: 100%;
    			height: 100%;
    		}
    		
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		
    		.bg {
    			width: 100%;
    			height: 100%;
    			background: url("./2.jpg") no-repeat fixed;
    		}
    		
    		.drag {
    			position: absolute;
    			top: 200px;
    			left: 400px;
    			width: 200px;
    			height: 200px;
    			background: inherit;
    			filter: blur(15px);
    		}
    	</Style>
    	</head>
    
    	<body>
    		<div class="bg">
    			<div class="drag"></div>
    		</div>
    	</body>
    
    </html>
    

    效果图:
    在这里插入图片描述

    背景局部清晰:

    这和背景局部模糊的原理一样,我觉得都是依赖一个很重要的属性
    background-attachment:fixed,假如把这属性去掉,可以试下,就没有那种效果了

    <!DOCTYPE html>
    <html lang="zh">
    
    	<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" />
    		<title>Document</title>
    	</head>
    	<Style>
    		html,
    		body {
    			width: 100%;
    			height: 100%;
    		}
    		
    		* {
    			margin: 0;
    			padding: 0;
    		}
    		
    		.bg {
    			width: 100%;
    			height: 100%;
    			background: url("./2.jpg") no-repeat fixed;
    		}
    		
    		.bg:after {
    			content: "";
    			width: 100%;
    			height: 100%;
    			position: absolute;
    			left: 0;
    			top: 0;
    			background: inherit;
    			filter: blur(3px);
    		}
    		
    		.show {
    			position: absolute;
    			top: 40%;
    			left: 30%;
    			width: 200px;
    			height: 200px;
    			background: inherit;
    			border: 1px solid red;
    			z-index: 1;
    		}
    	</Style>
    	</head>
    
    	<body>
    		<div class="bg">
    			<div class="show"></div>
    		</div>
    	</body>
    </html>
    

    效果图:
    在这里插入图片描述

    展开全文
  • android 模糊背景

    2015-06-02 10:38:42
    android 模糊背景 Android开发上的模糊技术,控件背景模糊处理。
  • jQuery页面滚动背景模糊放大效果是一款当页面滚动放大或缩小,背景模糊放大缩小效果。
  • CSS3背景模糊霓虹灯特效是一款纯CSS3打造粒子模糊随机显示动画特效。
  • 背景模糊效果的实现

    2021-04-03 11:39:27
    该源码实现了背景模糊效果的实现,源码FXBlurView,FXBlurView是一个UIView子类,复制了iOS 7的实时背景模糊效果,但是可以运行在iOS 5.0以上的版本上,简单易用。该开源项目提供了两种模式:静态模糊和动态模糊。...
  • 使用简单,根据代码中的 MainActivity示例就可以简单使用,把解压后的util包直接拷贝到你的项目中,然后就可以使用其中的方法了
  • 需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示。解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置,实质上是在底层加了一个div,给这个div...

    8783c7ef715b336f9559c3f8f1a48de0.png

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示。

    解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置,实质上是在底层加了一个div,给这个div设置模糊了。

    .banner_bg{

    width:100%;

    background-repeat:no-repeat;

    background-size:cover;

    -webkit-filter:blur(15px);

    -moz-filter:blur(15px);

    -o-filter:blur(15px);

    -ms-filter:blur(15px);

    filter:blur(15px);

    position:absolute;

    left:0;

    top:0;

    }

    总结

    以上所述是小编给大家介绍的CSS设置背景图片模糊内容不模糊的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    展开全文
  • unity 背景模糊

    千次阅读 2018-03-07 15:40:20
     //通道1:垂直方向模糊处理通道 ||Pass 1: Vertical Pass  Pass  {  ZTest Always  Cull Off    CGPROGRAM    //指定此通道的顶点着色器为vert_BlurVertical  #pragma vertex vert_BlurVertical ...

    shader代码

    // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'


    Shader "Unlit/DoFShader"
    {
    //-----------------------------------【属性 || Properties】------------------------------------------    
        Properties  
        {  
            //主纹理  
            _MainTex("Base (RGB)", 2D) = "white" {}  
        }  
      
        //----------------------------------【子着色器 || SubShader】---------------------------------------    
        SubShader  
        {  
            ZWrite Off  
            Blend Off  
      
            //---------------------------------------【通道0 || Pass 0】------------------------------------  
            //通道0:降采样通道 ||Pass 0: Down Sample Pass  
            Pass  
            {  
                ZTest Off  
                Cull Off  
      
                CGPROGRAM  
      
                //指定此通道的顶点着色器为vert_DownSmpl  
                #pragma vertex vert_DownSmpl  
                //指定此通道的像素着色器为frag_DownSmpl  
                #pragma fragment frag_DownSmpl  
      
                ENDCG  
      
            }  
      
            //---------------------------------------【通道1 || Pass 1】------------------------------------  
            //通道1:垂直方向模糊处理通道 ||Pass 1: Vertical Pass  
            Pass  
            {  
                ZTest Always  
                Cull Off  
      
                CGPROGRAM  
      
                //指定此通道的顶点着色器为vert_BlurVertical  
                #pragma vertex vert_BlurVertical  
                //指定此通道的像素着色器为frag_Blur  
                #pragma fragment frag_Blur  
      
                ENDCG  
            }  
      
            //---------------------------------------【通道2 || Pass 2】------------------------------------  
            //通道2:水平方向模糊处理通道 ||Pass 2: Horizontal Pass  
            Pass  
            {  
                ZTest Always  
                Cull Off  
      
                CGPROGRAM  
      
                //指定此通道的顶点着色器为vert_BlurHorizontal  
                #pragma vertex vert_BlurHorizontal  
                //指定此通道的像素着色器为frag_Blur  
                #pragma fragment frag_Blur  
      
                ENDCG  
            }  
        }  
      
      
        //-------------------------CG着色语言声明部分 || Begin CG Include Part----------------------    
        CGINCLUDE  
      
        //【1】头文件包含 || include  
        #include "UnityCG.cginc"  
      
        //【2】变量声明 || Variable Declaration  
        sampler2D _MainTex;  
        //UnityCG.cginc中内置的变量,纹理中的单像素尺寸|| it is the size of a texel of the texture  
        uniform half4 _MainTex_TexelSize;  
        //C#脚本控制的变量 || Parameter  
        uniform half _DownSampleValue;  
      
        //【3】顶点输入结构体 || Vertex Input Struct  
        struct VertexInput  
        {  
            //顶点位置坐标  
            float4 vertex : POSITION;  
            //一级纹理坐标  
            half2 texcoord : TEXCOORD0;  
        };  
      
        //【4】降采样输出结构体 || Vertex Input Struct  
        struct VertexOutput_DownSmpl  
        {  
            //像素位置坐标  
            float4 pos : SV_POSITION;  
            //一级纹理坐标(右上)  
            half2 uv20 : TEXCOORD0;  
            //二级纹理坐标(左下)  
            half2 uv21 : TEXCOORD1;  
            //三级纹理坐标(右下)  
            half2 uv22 : TEXCOORD2;  
            //四级纹理坐标(左上)  
            half2 uv23 : TEXCOORD3;  
        };  
      
      
        //【5】准备高斯模糊权重矩阵参数7x4的矩阵 ||  Gauss Weight  
        static const half4 GaussWeight[7] =  
        {  
            half4(0.0205,0.0205,0.0205,0),  
            half4(0.0855,0.0855,0.0855,0),  
            half4(0.232,0.232,0.232,0),  
            half4(0.324,0.324,0.324,1),  
            half4(0.232,0.232,0.232,0),  
            half4(0.0855,0.0855,0.0855,0),  
            half4(0.0205,0.0205,0.0205,0)  
        };  
      
      
        //【6】顶点着色函数 || Vertex Shader Function  
        VertexOutput_DownSmpl vert_DownSmpl(VertexInput v)  
        {  
            //【6.1】实例化一个降采样输出结构  
            VertexOutput_DownSmpl o;  
      
            //【6.2】填充输出结构  
            //将三维空间中的坐标投影到二维窗口    
            o.pos = UnityObjectToClipPos(v.vertex);  
            //对图像的降采样:取像素上下左右周围的点,分别存于四级纹理坐标中  
            o.uv20 = v.texcoord + _MainTex_TexelSize.xy* half2(0.5h, 0.5h);;  
            o.uv21 = v.texcoord + _MainTex_TexelSize.xy * half2(-0.5h, -0.5h);  
            o.uv22 = v.texcoord + _MainTex_TexelSize.xy * half2(0.5h, -0.5h);  
            o.uv23 = v.texcoord + _MainTex_TexelSize.xy * half2(-0.5h, 0.5h);  
      
            //【6.3】返回最终的输出结果  
            return o;  
        }  
      
        //【7】片段着色函数 || Fragment Shader Function  
        fixed4 frag_DownSmpl(VertexOutput_DownSmpl i) : SV_Target  
        {  
            //【7.1】定义一个临时的颜色值  
            fixed4 color = (0,0,0,0);  
      
            //【7.2】四个相邻像素点处的纹理值相加  
            color += tex2D(_MainTex, i.uv20);  
            color += tex2D(_MainTex, i.uv21);  
            color += tex2D(_MainTex, i.uv22);  
            color += tex2D(_MainTex, i.uv23);  
      
            //【7.3】返回最终的平均值  
            return color / 4;  
        }  
      
        //【8】顶点输入结构体 || Vertex Input Struct  
        struct VertexOutput_Blur  
        {  
            //像素坐标  
            float4 pos : SV_POSITION;  
            //一级纹理(纹理坐标)  
            half4 uv : TEXCOORD0;  
            //二级纹理(偏移量)  
            half2 offset : TEXCOORD1;  
        };  
      
        //【9】顶点着色函数 || Vertex Shader Function  
        VertexOutput_Blur vert_BlurHorizontal(VertexInput v)  
        {  
            //【9.1】实例化一个输出结构  
            VertexOutput_Blur o;  
      
            //【9.2】填充输出结构  
            //将三维空间中的坐标投影到二维窗口    
            o.pos = UnityObjectToClipPos(v.vertex);  
            //纹理坐标  
            o.uv = half4(v.texcoord.xy, 1, 1);  
            //计算X方向的偏移量  
            o.offset = _MainTex_TexelSize.xy * half2(1.0, 0.0) * _DownSampleValue;  
      
            //【9.3】返回最终的输出结果  
            return o;  
        }  
      
        //【10】顶点着色函数 || Vertex Shader Function  
        VertexOutput_Blur vert_BlurVertical(VertexInput v)  
        {  
            //【10.1】实例化一个输出结构  
            VertexOutput_Blur o;  
      
            //【10.2】填充输出结构  
            //将三维空间中的坐标投影到二维窗口    
            o.pos = UnityObjectToClipPos(v.vertex);  
            //纹理坐标  
            o.uv = half4(v.texcoord.xy, 1, 1);  
            //计算Y方向的偏移量  
            o.offset = _MainTex_TexelSize.xy * half2(0.0, 1.0) * _DownSampleValue;  
      
            //【10.3】返回最终的输出结果  
            return o;  
        }  
      
        //【11】片段着色函数 || Fragment Shader Function  
        half4 frag_Blur(VertexOutput_Blur i) : SV_Target  
        {  
            //【11.1】获取原始的uv坐标  
            half2 uv = i.uv.xy;  
      
            //【11.2】获取偏移量  
            half2 OffsetWidth = i.offset;  
            //从中心点偏移3个间隔,从最左或最上开始加权累加  
            half2 uv_withOffset = uv - OffsetWidth * 3.0;  
      
            //【11.3】循环获取加权后的颜色值  
            half4 color = 0;  
            for (int j = 0; j< 7; j++)  
            {  
                //偏移后的像素纹理值  
                half4 texCol = tex2D(_MainTex, uv_withOffset);  
                //待输出颜色值+=偏移后的像素纹理值 x 高斯权重  
                color += texCol * GaussWeight[j];  
                //移到下一个像素处,准备下一次循环加权  
                uv_withOffset += OffsetWidth;  
            }  
      
            //【11.4】返回最终的颜色值  
            return color;  
        }  
      
        //-------------------结束CG着色语言声明部分  || End CG Programming Part------------------               
        ENDCG  
      
        FallBack Off  

    }


    c#代码

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;


    //设置在编辑模式下也执行该脚本  
    [ExecuteInEditMode]
    //添加选项到菜单中  
    [AddComponentMenu("Unlit/DoFShader")]  
    public class MyDepthOfField : MonoBehaviour {


    //-------------------变量声明部分-------------------  
    #region Variables


    //指定Shader名称  
    private string ShaderName = "Unlit/DoFShader";


    //着色器和材质实例  
    public Shader CurShader;
    private Material CurMaterial;


    //几个用于调节参数的中间变量  
    public static int ChangeValue;
    public static float ChangeValue2;
    public static int ChangeValue3;


    //降采样次数  
    [Range(0, 6), Tooltip("[降采样次数]向下采样的次数。此值越大,则采样间隔越大,需要处理的像素点越少,运行速度越快。")]
    public int DownSampleNum = 2;
    //模糊扩散度  
    [Range(0.0f, 20.0f), Tooltip("[模糊扩散度]进行高斯模糊时,相邻像素点的间隔。此值越大相邻像素间隔越远,图像越模糊。但过大的值会导致失真。")]
    public float BlurSpreadSize = 3.0f;
    //迭代次数  
    [Range(0, 8), Tooltip("[迭代次数]此值越大,则模糊操作的迭代次数越多,模糊效果越好,但消耗越大。")]
    public int BlurIterations = 3;


    #endregion


    //-------------------------材质的get&set----------------------------  
    #region MaterialGetAndSet
    Material material
    {
    get
    {
    if (CurMaterial == null)
    {
    CurMaterial = new Material(CurShader);
    CurMaterial.hideFlags = HideFlags.HideAndDontSave;
    }
    return CurMaterial;
    }
    }
    #endregion


    #region Functions
    //-----------------------------------------【Start()函数】---------------------------------------------    
    // 说明:此函数仅在Update函数第一次被调用前被调用  
    //--------------------------------------------------------------------------------------------------------  
    void Start()
    {
    //依次赋值  
    ChangeValue = DownSampleNum;
    ChangeValue2 = BlurSpreadSize;
    ChangeValue3 = BlurIterations;


    //找到当前的Shader文件  
    CurShader = Shader.Find(ShaderName);


    //判断当前设备是否支持屏幕特效  
    if (!SystemInfo.supportsImageEffects)
    {
    enabled = false;
    return;
    }
    }


    //-------------------------------------【OnRenderImage()函数】------------------------------------    
    // 说明:此函数在当完成所有渲染图片后被调用,用来渲染图片后期效果  
    //--------------------------------------------------------------------------------------------------------  
    void OnRenderImage(RenderTexture sourceTexture, RenderTexture destTexture)
    {
    //着色器实例不为空,就进行参数设置  
    if (CurShader != null)
    {
    //【0】参数准备  
    //根据向下采样的次数确定宽度系数。用于控制降采样后相邻像素的间隔  
    float widthMod = 1.0f / (1.0f * (1 << DownSampleNum));
    //Shader的降采样参数赋值  
    material.SetFloat("_DownSampleValue", BlurSpreadSize * widthMod);
    //设置渲染模式:双线性  
    sourceTexture.filterMode = FilterMode.Bilinear;
    //通过右移,准备长、宽参数值  
    int renderWidth = sourceTexture.width >> DownSampleNum;
    int renderHeight = sourceTexture.height >> DownSampleNum;


    // 【1】处理Shader的通道0,用于降采样 ||Pass 0,for down sample  
    //准备一个缓存renderBuffer,用于准备存放最终数据  
    RenderTexture renderBuffer = RenderTexture.GetTemporary(renderWidth, renderHeight, 0, sourceTexture.format);
    //设置渲染模式:双线性  
    renderBuffer.filterMode = FilterMode.Bilinear;
    //拷贝sourceTexture中的渲染数据到renderBuffer,并仅绘制指定的pass0的纹理数据  
    Graphics.Blit(sourceTexture, renderBuffer, material, 0);


    //【2】根据BlurIterations(迭代次数),来进行指定次数的迭代操作  
    for (int i = 0; i < BlurIterations; i++)
    {
    //【2.1】Shader参数赋值  
    //迭代偏移量参数  
    float iterationOffs = (i * 1.0f);
    //Shader的降采样参数赋值  
    material.SetFloat("_DownSampleValue", BlurSpreadSize * widthMod + iterationOffs);


    // 【2.2】处理Shader的通道1,垂直方向模糊处理 || Pass1,for vertical blur  
    // 定义一个临时渲染的缓存tempBuffer  
    RenderTexture tempBuffer = RenderTexture.GetTemporary(renderWidth, renderHeight, 0, sourceTexture.format);
    // 拷贝renderBuffer中的渲染数据到tempBuffer,并仅绘制指定的pass1的纹理数据  
    Graphics.Blit(renderBuffer, tempBuffer, material, 1);
    //  清空renderBuffer  
    RenderTexture.ReleaseTemporary(renderBuffer);
    // 将tempBuffer赋给renderBuffer,此时renderBuffer里面pass0和pass1的数据已经准备好  
    renderBuffer = tempBuffer;


    // 【2.3】处理Shader的通道2,竖直方向模糊处理 || Pass2,for horizontal blur  
    // 获取临时渲染纹理  
    tempBuffer = RenderTexture.GetTemporary(renderWidth, renderHeight, 0, sourceTexture.format);
    // 拷贝renderBuffer中的渲染数据到tempBuffer,并仅绘制指定的pass2的纹理数据  
    Graphics.Blit(renderBuffer, tempBuffer, CurMaterial, 2);


    //【2.4】得到pass0、pass1和pass2的数据都已经准备好的renderBuffer  
    // 再次清空renderBuffer  
    RenderTexture.ReleaseTemporary(renderBuffer);
    // 再次将tempBuffer赋给renderBuffer,此时renderBuffer里面pass0、pass1和pass2的数据都已经准备好  
    renderBuffer = tempBuffer;
    }


    //拷贝最终的renderBuffer到目标纹理,并绘制所有通道的纹理到屏幕  
    Graphics.Blit(renderBuffer, destTexture);
    //清空renderBuffer  
    RenderTexture.ReleaseTemporary(renderBuffer);


    }


    //着色器实例为空,直接拷贝屏幕上的效果。此情况下是没有实现屏幕特效的  
    else
    {
    //直接拷贝源纹理到目标渲染纹理  
    Graphics.Blit(sourceTexture, destTexture);
    }
    }




    //-----------------------------------------【OnValidate()函数】--------------------------------------    
    // 说明:此函数在编辑器中该脚本的某个值发生了改变后被调用  
    //--------------------------------------------------------------------------------------------------------  
    void OnValidate()
    {
    //将编辑器中的值赋值回来,确保在编辑器中值的改变立刻让结果生效  
    ChangeValue = DownSampleNum;
    ChangeValue2 = BlurSpreadSize;
    ChangeValue3 = BlurIterations;
    }


    //-----------------------------------------【Update()函数】--------------------------------------    
    // 说明:此函数每帧都会被调用  
    //--------------------------------------------------------------------------------------------------------  
    void Update()
    {
    //若程序在运行,进行赋值  
    if (Application.isPlaying)
    {
    //赋值  
    DownSampleNum = ChangeValue;
    BlurSpreadSize = ChangeValue2;
    BlurIterations = ChangeValue3;
    }
    //若程序没有在运行,去寻找对应的Shader文件  
    #if UNITY_EDITOR
    if (Application.isPlaying != true)
    {
    CurShader = Shader.Find(ShaderName);
    }
    #endif


    }


    //-----------------------------------------【OnDisable()函数】---------------------------------------    
    // 说明:当对象变为不可用或非激活状态时此函数便被调用    
    //--------------------------------------------------------------------------------------------------------  
    void OnDisable()
    {
    if (CurMaterial)
    {
    //立即销毁材质实例  
    DestroyImmediate(CurMaterial);
    }


    }


    #endregion  

    }


    效果图



    展开全文
  • 主要介绍了CSS设置背景模糊的实现方法,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示。 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置,实质上是在底层加了一个div,给这个...
  • 层级之下的所有控件都将模糊 Blur Strength设置模糊度,值越大越模糊 转载于:https://www.cnblogs.com/Optimals/p/11195379.html
  • 这个源码案例是一个具体立体感的实现背景模糊效果的对话框案例,源码BlurDialogFragment,可以在dialog的后面造成模糊效果,模糊的实现是基于FastBlur算法实现的,Android源码频道下载。
  • 这是支持视图背景模糊效果特效源码,也是比较不错的弹出菜单效果,当菜单弹出时,背景视图就会变成模糊效果,因此这样更能突出了效果功能,开发突出视图效果的朋友可以参考一下。
  • Android 背景模糊

    千次阅读 2015-08-24 13:23:28
    1.在一些社交app中每每看到以下图片: ...首先:在网络上找了一个模糊图片的工具类package com.sinocloud;import android.graphics.Bitmap;/** * Created by paveld on 3/6/14. */ public class FastBlur { pu
  • 首先编写一个div的css样式 #web_bg{ position:fixed; top: 0; left: 0; width:100%; height:100%; min-width: 1000px; z-index:-10; zoom: 1;... 最终效果: 可以看到背景虽然模糊了,但是子元素并没有
  • 背景图片模糊实现

    2016-03-07 12:22:26
    实现背景图片模糊,算法已写好,直接调用,例子Demo提供调用借鉴,简单,科加快开发
  • CSS模糊背景效果代码

    2021-01-23 05:18:09
    CSS模糊背景效果代码
  • 背景模糊工具库.zip

    2019-09-23 15:16:34
    背景模糊工具库.zip,create a popupview with blur background,using swift!
  • jQuery页面滚动背景模糊放大效果是一款当页面滚动放大或缩小,背景模糊放大缩小效果。
  • 仿 [Tidy相册] 背景模糊效果 [注意:本资源来自网络,如有侵权,请联系我删除,谢谢。]
  • CSS实现背景模糊

    2020-09-16 23:56:58
    CSS实现背景模糊 body::before{ content: ''; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; background-image: url(../carImg/丰田亚洲龙.jpg); filter: blur(7px); z-index: -1; ...
  • 这是一张绿色模糊渐变背景的iOS风格PPT背景图片,第一PPT模板网提供精美幻灯片背景图片免费下载; 关键词:绿色渐变PPT背景图片,.jpg格式;
  • 这是一款使用css3 transition属性制作的导航菜单背景模糊特效插件。这款插件共集合了7种不同的导航菜单背景模糊效果。其效果是当鼠标滑过菜单时,当前菜单项清晰显示,其余项变得模糊。
  • CSS3背景模糊霓虹灯特效是一款纯CSS3打造粒子模糊随机显示动画特效。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 85,162
精华内容 34,064
关键字:

如何让背景模糊