精华内容
下载资源
问答
  • 图像半透明处理

    2018-12-26 21:12:41
    图像半透明处理,JAVA程序,调试过,亲测有效
  • 纯css实现背景图片半透明,内容不透明

    万次阅读 多人点赞 2018-03-12 15:41:38
    最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的,严重影响视觉效果。 还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。 正确姿势 我想到两个方...

    前言

    最近做一个登陆界面的,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧。

    效果展示

    半透明
    这里写图片描述
    不透明
    这里写图片描述

    常见的失败做法

    最常见的做法事设置元素的opacity,这种设置出来的效果就是内容与背景都事半透明的,严重影响视觉效果。
    还有就是设置background-color:rgba(),这种方式只能设置背景颜色的透明度。

    正确姿势

    我想到两个方法,第一个就是利用伪元素::before,我们通过给伪元素添加背景并且将伪元素的设置伪元素的背景透明度来实现

    <!DOCTYPE html>
     <html lang="en">
     <head>
     	<meta charset="UTF-8">
     	<title>登陆</title>
     	<style type="text/css">
     		body{
     			background-image:url(images/bird.jpg);
     			background-repeat: no-repeat;
     			background-size:100%;
     		}
     		.login_box::before{
     			content:"";
     			/*-webkit-filter: opacity(50%);  
        		filter: opacity(50%); */
        		background-image:url(images/love.jpg);
        		opacity:0.5;//透明度设置
     			z-index:-1;
     			background-size:500px 300px;
     			width:500px; 
     			height:300px;
     			position:absolute;
     			//一定要设置position:absolute,这样才能设置z-index,让背景处于内容的下一层
     			top:0px;
     			left:0px;
     			border-radius:40px;
     		}
     		.login_box{
     			position:fixed;
     			left:50%;
     			top:200px;
     			width:500px;
     			height:300px;
     			margin-left:-250px;
     			border-radius:40px;
     			box-shadow: 10px 10px 5px #888;
     			border:1px solid #666;
     			
     			text-align:center;
     		}
     		form{
     			display:inline-block;
     			margin-top:100px;
     		}
     		input{
     			display:block;
     			width:250px;
     			height:30px;
     			background-color: #888;
     			border:1px solid #fee;
     			outline:none;
     			border-radius:10px;
     		}
     		input[type="submit"]{
     			width:100px;
     			height:30x;
     			margin-left: 70px;
     			background-color: #ccc;
     		}
     		span{
     			color:red;
     			font-size:15px;
     		}
     	</style>
     </head>
     <body>
     	<div class="login_box">
     		<form action=<?php echo $_SERVER['PHP_SELF'] ?> method="post">
    	 		<input type="text" name="nickname">
    	 		<span><?php echo $nameERR; ?></span>
    	 		<br>
    	 		<input type="password" name="password">
    	 		<span><?php echo $passwordERR; ?></span>
    	 		<br>
    	 		<input type="submit" value="登陆">
     		</form>	
     	</div>
     </body>
     </html>
    

    还有一种方法与伪元素异曲同工,我们可以通过设置不通的div,里面的div放置内容,父级div设置背景,然后给它设置透明度,大概布局如下:

    <div class="bg">
    	<div class="content">
    	一些内容
    	</div>
    </div>
    

    这样也可以达到同样的效果

    展开全文
  • 240种特效 包含原picshow的%80...蓝色字:适用于透明图片 红色字:特效对比 三大类特效 块操作 像素操作 多边形填充图片 抛物线、扇形、镭射、飘雪、马赛克、错位 溶解、毛刺、卷轴、百叶窗、随机、轮幻、多边形等
  • 绘制图片 cxt.drawImgae(图片节点,x,y,w,h) 绘制图片 cxt.drawImage(绘制图片的节点,距离画布的X方向绘制图片,距离画布的Y方向绘制图片,绘制图片的宽度,绘制图片的高度) 裁切图片 cxt.drawImage(图片节点,sx,sy,sw,...

    绘制渐变

    前言

    绘制一条线段 让这个线段的宽度是10 颜色是蓝色

    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');
    cxt.lineWidth = 10;//设置线宽
    cxt.strokeStyle = 'blue';//设置线的颜色
    cxt.beginPath();//闭合上一次路径
    cxt.moveTo(100,100);//绘制线条开始路径
    cxt.lineTo(300,300);//绘制线条结束路径
    cxt.stroke();//绘制线条

    如上:我们矩形,圆形和线条的时候都是绘制单一颜色的,那么canvas这个元素给我们提供了两个方式来绘制渐变

    基础知识

    线性渐变

    1. cxt.createLinearGradient(200,100,300,300);创建线性渐变
    2. cxt.createLinearGradient(开始渐变X方向,开始渐变Y方向,结束渐变X方向,结束渐变Y方向);

    3. 两个直线确定一条直线(渐变的开始和结束) 这个直线就是渐变的方向

    径向渐变

    1. cxt.createRadialGradient(250,200,10,200,200,80); 创建径向渐变
    2. cxt.createRadialGradient(内部圆心的X方向,内部圆心的Y方向,内部圆心的半经,外部圆的X方向,外部圆的Y方向,外部圆的半经,);

    3. 先添加里层的圆 在添加外部的圆

    cxt.createLinearGradient和cxt.createLinearGradient方法创建线性渐变和径向渐变,返回结果是一个颜色对象,然后颜色对象上面有一个addColorStop方法来添加颜色的终止点,在让画笔的颜色应用于颜色对象即可

    添加渐变的颜色终止点

    颜色对象上面的addColorStop方法来添加渐变的终止点

    添加渐变的颜色终止点(也可以写多个) ,0-1表示的是渐变起点-渐变终点

    1. color.addColorStop(0,'red'); 添加颜色的终止点

    2. color.addColorStop(渐变的范围,渐变的颜色);

    3. addColorStop :add(添加) color(颜色) stop(停止的点)

    让画笔的颜色应用渐变对象

    1. cxt.fillStyle = color; 让实心矩形应用渐变对象
    2. cxt.strokeStyle = color; 让空心矩形应用渐变对象

    线性渐变

    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');
    //创建线性渐变 返回结果是一个颜色对象
    var color = cxt.createLinearGradient(200, 100, 300, 300);
    //添加渐变颜色的终止点
    color.addColorStop(0,'red');
    color.addColorStop(0.5,'green');
    color.addColorStop(1,'blue');
    //让画笔应用于线性渐变对象
    cxt.fillStyle = color;
    //绘制一个线性渐变的矩形
    cxt.fillRect(200,100,200,200);

    通过画笔上面的createLinearGradient方法来创建一个线性渐变,然后这个返回结果是一个颜色对象,颜色对象上面的addColorStop方法来创建渐变颜色的终止点,然后在让画笔颜色应用于这个渐变对象,在通过fillRect方法绘制一个带有线性渐变的矩形

    径向渐变 

    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');
    //创建线性渐变 返回结果是一个颜色对象
    var color = cxt.createRadialGradient(250, 200, 10, 200, 200, 80);
    //先添加里层的圆 在添加外部的圆
    //添加颜色的终止点 在直径方向发生渐变
    color.addColorStop(0, 'red');
    color.addColorStop(1, 'blue');
    //让画笔应用于线性渐变对象
    cxt.fillStyle = color;
    //绘制一个线性渐变的矩形
    cxt.fillRect(100,100,200,200);

    通过画笔上面的createRadialGradient方法来创建一个径向渐变,然后这个返回结果是一个颜色对象,颜色对象上面的addColorStop方法来创建渐变颜色的终止点(先添加里层的圆 在添加外部的圆,添加颜色的终止点 在直径方向发生渐变),然后在让画笔颜色应用于这个渐变对象,在通过fillRect方法绘制一个带有径向渐变的矩形

    绘制图片和视频

    前言

    在H5中canvas的功能是很强大的,他不仅仅能绘制矩形,圆形,线条,曲线,文字,那他还可以绘制图片和视频

    绘制图片(基础知识)

    绘制图片

    1. cxt.drawImgae(图片节点,x,y,w,h) 绘制图片

    2. cxt.drawImage(绘制图片的节点,距离画布的X方向绘制图片,距离画布的Y方向绘制图片,绘制图片的宽度,绘制图片的高度)

    裁切图片

    1. cxt.drawImage(图片节点,sx,sy,sw,sh,x,y,w,h) 裁剪图片
    2. 从图片的左上角开始裁切  裁切的起点sx,sy  裁切的区域是sw*sh
    3. 从画布的左上角开始绘制  绘制的起点x,y    绘制的区域是w*h

    cxt.drawImage(裁剪图片的节点,要裁剪图片的水平距离,要裁剪图片的竖直距离,要裁剪图片的宽度,要裁剪图片的高度,要绘制图片的水平方向(距离画布),要绘制图片的竖直方向(距离画布),要绘制图片的宽度,绘制图片的高度) 

    前四个数值是开始裁剪图片的区域 后四个数值是绘制图片的区域

    绘制图片

    绘制图片:获取到canvas元素,在通过getContext方法获取到canvas上面的2d画笔

    然后通过 new Image()的方法创建img节点(用new Image方式创建的节点跟用document.createElement方式创建节点完全一致)

    在通过img节点上面的src属性添加图片的路径(这一步表示向本地请求资源是异步代码),然后给img注册onload事件(等图片资源加载完毕触发事件处理函数) ,然后在通过画笔上面的drawImage方法画出整张图片

    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');
    //创建img节点
    var oImg = new Image();
    //等图片请求完在赋值给节点上面的src(会下载这张图片)
    oImg.src = '1.png';
    //等图片加载完毕触发onload事件
    oImg.onload = function(){
        cxt.drawImage(oImg,0,0,canvas.width,canvas.height)
    }

    剪切图片

    剪切图片:剪切图片方法和绘制图片的方法一样,只不是剪切图片drawImage方法上面接收的参数比绘制图片多

    剪切图片接收的参数:

    • cxt.drawImage(图片节点,sx,sy,sw,sh,x,y,w,h)
    • 从图片的左上角开始裁切  裁切的起点sx,sy  裁切的区域是sw*sh
    • 从画布的左上角开始绘制  绘制的起点x,y    绘制的区域是w*h
    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');
    //创建img节点
    var oImg = new Image();
    //等图片请求完在赋值给节点上面的src(会下载这张图片)
    oImg.src = '1.png';
    //等图片加载完毕触发onload事件
    oImg.onload = function(){
        cxt.drawImage(oImg, 400, 200, 560, 470, 100, 100, 200, 500);
    }

    绘制视频(基础知识)

    1. cxt.drawImage(视频节点,x,y,w,h)  绘制视频
    2. cxt.drawImage(视频节点,绘制视频的水平方向,绘制视频的竖直方向,绘制视频的宽度,绘制视频的高度)

    绘制图片和绘制视频都是通过drawImage方法来绘制的,但是对于绘制静止的视频来说就是相当于图片

    在视频中每一帧的事件是13毫秒,这是视频播放的最快的速度

    我们绘制视频有两种方法

    video 是一个资源 必须等到该资源下载完成才能够绘制视频(这一步是在向本地请求视频资源)是异步代码

    第一种方法(常用)

    在循环定时器里面用drawImage方法绘制视频

    因为浏览器最快的时间间隔是13毫秒,然后我们通过循环计时器每13毫秒绘制出一个视频画面,这样就不会出现视频播放留白现象了

    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');
    //获取视频节点
    var video = document.querySelector('video');
    //video 是一个资源 必须等到该资源下载完成才能够绘制视频
    //每隔13ms  就绘制视频中的一帧(视频中的某一个画面)
    setInterval(function(){
        cxt.drawImage(video,0,0,500,500);
    },13);//浏览器最快的时间间隔是13毫秒

    第二种方法(不推荐)

    给视频节点添加oncanplay事件里面用drawImage方法绘制视频

    因为视频也是个资源,有可能这个视频资源体积太大导致短时间加载不出来,这就导致了视频在此之间留白现象,给视频节点注册一个onload事件表示 当可以播放视频在绘制视频

    但是这样有一个缺点:那就是只能绘制出来某一个视频画面

    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');
    //获取视频节点
    var video = document.querySelector('video');
    //video 是一个资源 必须等到该资源下载完成才能够绘制视频
    video.oncanplay = function(){
        cxt.drawImage(video,0,0,500,400)
    }

    以上方法绘制视频就不会出现视频留白现象了

    画布变换

    前言

    canvas这个元素向我们提供了四种让画布变换的方式,能让我们更好的完成canvas中的某些特效

    基础知识

    1. cxt.save()  保留上次的画布状态 常用
    2. cxt.restore() 释放上次保存的画布状态 常用 

    3. cxt.translate(距离画布水平方向,距离画布竖直方向)  设置绘制图形的起点位置 常用

    4. cxt.rotate(角度) 让画布旋转 Math.PI = 180°

    5. cxt.scale(水平方向缩放,竖直方向缩放); 让画布缩放

    我们在绘制图形的时候,不管在上面情况下都是基于画布的左上角来绘制的

    绘制两条线段(用translate方法设置图形的起点位置)

    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');
    //绘制一条线段
    cxt.beginPath();
    cxt.moveTo(100,100);
    cxt.lineTo(300,100);
    cxt.closePath();
    cxt.stroke();
    //绘制另一条线段
    cxt.beginPath();
    cxt.moveTo(50,50);
    cxt.lineTo(200,50);
    cxt.closePath();
    cxt.stroke();

    上面绘制的两条线段都是基于画布左上角0,0位置开始绘制的,那该怎么更改绘制图形的起点位置呢

    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');
    //绘制第一条线段
    cxt.beginPath();
    //设置绘制图形的起点位置
    // cxt.translate(画布的水平方向,画布的竖直方向); 
    //现在画的所有的点都是基于 50 50 这个位置起点画出
    cxt.translate(50,50);
    cxt.moveTo(100,100);
    cxt.lineTo(100,200);
    cxt.closePath();
    cxt.stroke();
    //绘制第二条线段
    cxt.beginPath();
    cxt.moveTo(100,100);
    cxt.lineTo(200,100);
    cxt.closePath();
    cxt.stroke();

    这样开始绘制图形路径之前用translate方法先设置图形的起点位置,以后绘制图片都是以50,50这个点画出了

    绘制所有图形的参考点是50 50 这个位置(如下)

    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');
    cxt.beginPath();
    cxt.translate(50,50);
    cxt.arc(0,0,30,0,Math.PI*2);
    cxt.stroke();

    那该怎么让一个图形基于50 50 这个点绘制 ,让另一个图形基于 0 0 这个点绘制呢

    解决方案(用cave保留画布的状态,在用restore释放保存画布的状态)

    当画笔开始画的时候用cave方法保留上一次画布的初始状态(在translate之前保留画布的状态),然后在到画下一个图形的时候用restore方法释放当前保留画布的状态

    代码如下

    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');
    //一旦执行save那么画笔的初始状态就会被保留
    cxt.save();//保留上一次画布的状态
    cxt.beginPath();
    //设置绘制图形的起点位置
    cxt.translate(50,50);
    cxt.moveTo(100,100);
    cxt.lineTo(100,200);
    cxt.closePath();
    cxt.stroke();
    //释放上一次保留画布的状态
    cxt.restore();//从0 0 起点开始绘制图形
    cxt.beginPath();
    cxt.arc(30,30,30,0,Math.PI*2);
    cxt.stroke();

    注意:有save保存上一次画布的状态必须有restore释放上一次画布的状态

    使用translate设置绘制图形的起点位置,就要先保留一下画布的状态(save保留画布的状态)在释放(restore释放画布的状态)

    绘制画布的主流还是要以画布的左上角为参考的

    那该怎么让一张画布旋转和缩放呢

    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');
    cxt.beginPath();
    //让画布旋转
    //cxt.rotate(角度(Math.PI=180°));
    cxt.rotate(Math.PI/6);
    //缩放画布
    cxt.scale(1.5,1.5);
    cxt.moveTo(250,250);
    cxt.lineTo(250,100);
    cxt.closePath();
    cxt.stroke();

    使用rotate方法可以让画布旋转,使用scale方法可以让画布缩放

    使用translate改变参考做时钟的指针比较简单(代码如下)都是基于250,250这个点展开的绘制

    var canvas = document.getElementById('myCanvas');
    var cxt = canvas.getContext('2d');
    cxt.translate(250, 250);
    function needle(needle) {
        cxt.beginPath();
        cxt.strokeStyle = needle.color;
        cxt.lineWidth = needle.linewidth;
        cxt.rotate(needle.rotate);
        cxt.moveTo(0, 0);
        cxt.lineTo(0, -needle.line);
        cxt.stroke();
    }
    //绘制时针
    needle({
        color: 'blue',
        linewidth: 4,
        rotate: Math.PI / 2,
        line: 150,
    })
    //绘制分针
    needle({
        color: 'green',
        linewidth: 3,
        rotate: Math.PI / 3,
        line: 100,
    })
    //绘制秒钟
    needle({
        color: 'red',
        linewidth: 2,
        rotate: Math.PI / 5,
        line: 50,
    })

    制作马赛克

    前言

    什么是马赛克?

    马赛克是指将影像特定区域的色阶细节劣化并造成色块打乱的效果,让人看不清具体的画面。

    因为马赛克这种模糊看上去有一个个的小格子组成,便形象的称这种画面为马赛克。其目的通常是使之无法辨认。

    基础知识

    创建某一个区域的像素点

    1. cxt.createImageData(w,h)  创建w*h的区域来存储像素点
    2. cxt.createImageData(存储像素点的宽度,存储像素点的高度)

    获取某一个区域的像素点

    1. cxt.getImageData(x,y,w,h)  x,y点开始获取w*h区域的像素点
    2. cxt.getImageData(距离画布水平方向获取像素,距离画布竖直方向获取像素,获取画布像素的宽度,获取画布像素的高度)

    填充某一个区域的像素点

    1. cxt.putImageData(数据,x,y)  x,y点开始往画布里填充数据 put(丢)

    2. cxt1.putImageData(颜色数据,从画布的X轴方向丢数据, 从画布的Y轴看书方向丢数据)

    制作马赛克

    我们在制作马赛克的时候需要两个canvas标签(如下)

    HTML部分

    <canvas id="canvas" width="500" height="400"></canvas>
    <canvas id="canvas1" width="500" height="400"></canvas>

    CSS部分

    <style>
    	*{
    		margin:0;
    		padding:0;
    	}
    	canvas{
    		display: block;
    		border: 2px solid blue;
    		margin: 50px auto;
    	}
    </style>

    一个canvas标签是填充原图像的,而另一个canvas标签是填充马赛克图像的

    第一步:获取两个canvas元素和画笔

    //获取原图的canvas元素和画笔
    var canvas1 = document.getElementById('canvas1');
    var cxt1 = canvas1.getContext('2d');
    //获取马赛克图的canvas元素和画笔
    var canvas2 = document.getElementById('canvas2');
    var cxt2 = canvas2.getContext('2d');
    console.log(canvas1,canvas2)

    第二步:在通过canvas的方式把第一个canvas标签绘画出来一张图片

    //获取原图的canvas元素和画笔
    var canvas1 = document.getElementById('canvas1');
    var cxt1 = canvas1.getContext('2d');
    //获取马赛克图的canvas元素和画笔
    var canvas2 = document.getElementById('canvas2');
    var cxt2 = canvas2.getContext('2d');
    
    //绘制图片
    //创建img节点
    var oImg = new Image();
    //把img节点的src属性赋值
    oImg.src = '1.png';//请求图片数据(异步代码)
    //等图片加载完成触发onload事件的回调函数
    oImg.onload = function(){
        //画出图片
        cxt1.drawImage(this,0,0,500,400);//draw(画)
    }

    当前图片是宽500px,高400px,那就是当前图片是500*400个像素拼出来的一张图片

    然后在通过getImageData方式获取画布中某个区域的像素点(代码如下)

    然后返回结果是一个对象,是一个图片像素数据对象

    var imgaeData = cxt.getImageData(0, 0, 500, 400);//获取图片数据

     图片像素数据对象里面的data属性存储了你图片的真正的数据(图片中的500*400像素点组成了这个data数据)

    他是以水平方向500个像素点 竖直方向400个像素点 拼接出来了一张图片

    然后获取图片的像素点的颜色,通过rgba形式来表示的(rgba(r,g,b,a)就是相当于一个像素点有四个数据)

    500*400 = 200000个像素点 200000*4 = 800000 所以一张图片是以800000万个数据组成的

    800000个颜色数据 以rgba四个数据是一个像素点的形式展现出来 (一个像素点有4个颜色数据)

    注意:

    在这里面的rgba颜色值表现是形式是把 最后一项透明度分成0-255来表示的

    rgba(0-255, 0-255,0-255, 0-255)

    制作马赛克的思路

    让图片以10个像素的固定颜色形式填充的图片

    让第一个像素点的 r值 g值 b值 a值 到第十个像素点 的rgba值一样 以此类推

    完整制作马赛克代码(操作像素)

    <script>
        //获取原图的canvas元素和画笔
        var canvas1 = document.getElementById('canvas1');
        var cxt1 = canvas1.getContext('2d');
        //获取马赛克图的canvas元素和画笔
        var canvas2 = document.getElementById('canvas2');
        var cxt2 = canvas2.getContext('2d');
    
        //绘制图片
        //创建img节点
        var oImg = new Image();
        //把img节点的src属性赋值
        oImg.src = '1.png';//请求图片数据(异步代码)
        //等图片加载完成触发onload事件的回调函数
        oImg.onload = function(){
            //画出图片
            cxt1.drawImage(this,0,0,500,400);//draw(画)
            //获取图片数据
            var imgaeData = cxt1.getImageData(0, 0, 500, 400);
            /*
                马赛克 
                    4(rgba的个数)*10(每10个像素是一样的rgab值) = 40(每40循环一次)
                    每十个像素点的 r g b a值都一样
                    0-10 r g a b 都一样
                    11-20 r g a b 都一样
                    21-30 r g a b 都一样
            */
            var num = 40;
            for(var i=0;i<imgaeData.data.length;i+=num){
                //每隔4个点(rgba)就再次跟新下一个点的值
                for (var j = 1; j < num / 4; j++) {
                    imgaeData.data[i + 4 * j] = imgaeData.data[i];
                    imgaeData.data[i + 1 + 4 * j] = imgaeData.data[i + 1];
                    imgaeData.data[i + 2 + 4 * j] = imgaeData.data[i + 2];
                    imgaeData.data[i + 3 + 4 * j] = imgaeData.data[i + 3];
                };
            };
            //追加图片数据
            cxt2.putImageData(imgaeData, 0, 0);
        };
    </script>

    创建像素

    通过createImageData方法来创建500*400的一个区域的像素点,在通过for循环循环遍历图片数据对象中的data属性,并且往里面循环追加随机数并且向下取整,然后通过putImageData方法往整个画布内部添加像素点

    var canvas = document.getElementById('canvas1');
    var cxt = canvas.getContext('2d');
    
    //创建像素点
    //自定义一个空的图片像素数据对象
    var imageData = cxt.createImageData(500 , 400);
    //500*400 = 200000 个像素点有已rgab来表示 200000 *4 = 800000 
    
    //当前是我们认为创建的一个像素点是没有任何像素的
    //随机生成像素点
    for(var i=0;i<imageData.data.length;i++){
        imageData.data[i] = Math.floor(Math.random() * 256);
    }
    //追加图片数据
    cxt.putImageData(imageData,0,0)

     

    展开全文
  • 马赛克 单元格大小越大,方格越大,可以根据图片的大小调整单元格大小 降低不透明度 滤镜->锐化->usm锐化 USM锐化可以增加细节 USM锐化通过增加图像边缘的对比度来锐化图像。USM锐化不检测图像中的边缘, ...

    打开图片,ctrl+j 复制图层
    在这里插入图片描述
    滤镜->像素化->马赛克
    在这里插入图片描述
    单元格大小越大,方格越大,可以根据图片的大小调整单元格大小
    在这里插入图片描述
    降低不透明度
    在这里插入图片描述
    滤镜->锐化->usm锐化
    在这里插入图片描述

    USM锐化可以增加细节
    USM锐化通过增加图像边缘的对比度来锐化图像。USM锐化不检测图像中的边缘, 它会按您指定的阈值找到值与周围像素不同的像素。然后,它将按指定的量增强邻近像素的对比度。因此,对于邻近像素,较亮的像素将变得更亮,而较暗的像素将变得更暗。

    在这里插入图片描述
    ctrl+alt+f 再执行一次刚才的锐化滤镜操作

    添加蒙版,将小女孩用黑色画笔描出来,方格背景就诞生了
    在这里插入图片描述

    滤镜->风格化->拼贴, 可以制作拼贴的效果

    展开全文
  • */ brightness() | /* 给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值...

    兼容性

    表格中的数字表示支持该方法的第一个浏览器的版本号。

    紧跟在数字后面的 -webkit- 为指定浏览器的前缀。

    属性ChromebsEdgeFirefoxSafariOpera
    filter18.0 -webkit-不支持35.06.0 -webkit-15.0 -webkit-
    注意: 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性

    代码

    filter: blur(15px);
    transition: all 0.5s ease 0s;
    

    语法

    filter: none | 				/*默认值,没有效果。*/
    		initial |			/*设置属性为默认值*/
    		inherit |			/*从父元素继承该属性*/
    		blur() | 			/*
    				给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。*/
    		brightness() | 		/*
    				给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的,图像会比原来更亮。如果没有设定值,默认是1。*/
    		contrast() | 		/*
    				调整图像的对比度。值是0%的话,图像会全黑。值是100%,图像不变。值可以超过100%,意味着会运用更低的对比。若没有设置值,默认是1。*/
    		drop-shadow() | 	/*
    				给图像设置一个阴影效果。阴影是合成在图像下面,可以有模糊度的,可以以特定颜色画出的遮罩图的偏移版本。 函数接受<shadow>(在CSS3背景中定义)类型的值,除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似;不同之处在于,通过滤镜,一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下:
    			<offset-x> <offset-y> (必须)
    				这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位.
    				如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 <blur-radius> and/or <spread-radius>,会有模糊效果).
    			<blur-radius> (可选)
    				这是第三个code><length>值. 值越大,越模糊,则阴影会变得更大更淡.不允许负值 若未设定,默认是0 (则阴影的边界很锐利).
    			<spread-radius> (可选)
    				这是第四个 <length>值. 正值会使阴影扩张和变大,负值会是阴影缩小.若未设定,默认是0 (阴影会与元素一样大小). 
    				注意: Webkit, 以及一些其他浏览器 不支持第四个长度,如果加了也不会渲染。
    			<color> (可选)
    				查看 <color>该值可能的关键字和标记。若未设定,颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中, 会应用colorcolor属性的值。另外, 如果颜色值省略,WebKit中阴影是透明的。
    		*/
    		grayscale() | 		/*
    			将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;
    		*/
    		hue-rotate() | 		/*
    			给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg,则图像无变化。若值未设置,默认值是0deg。该值虽然没有最大值,超过360deg的值相当于又绕一圈。
    		*/
    		invert() | 			/*
    			反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。
    		*/
    		opacity() | 		/*
    			转化图像的透明程度。值定义转换的比例。值为0%则是完全透明,值为100%则图像无变化。值在0%和100%之间,则是效果的线性乘子,也相当于图像样本乘以数量。 若值未设置,值默认是1。该函数与已有的opacity属性很相似,不同之处在于通过filter,一些浏览器为了提升性能会提供硬件加速。
    		*/
    		saturate() | 		/*
    			转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和,值为100%则图像无变化。其他值,则是效果的线性乘子。超过100%的值是允许的,则有更高的饱和度。 若值未设置,值默认是1。
    		*/
    		sepia() | 			/*
    			将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;
    		*/
    		url();				/*
    			URL函数接受一个XML文件,该文件设置了 一个SVG滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。
    例如:`filter: url(svg-url#element-id)`
    		*/
    

    实例

    1.模糊
    img {
        -webkit-filter: blur(5px); /* Chrome, Safari, Opera */
        filter: blur(5px);
    }
    
    2.Brightness 函数
    img {
        -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */
        filter: brightness(200%);
    }
    
    3.Contrast 函数
    img {
        -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */
        filter: contrast(200%);
    }
    
    4.drop-shadow 函数
    img {
        -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
        filter: drop-shadow(8px 8px 10px red);
    }
    
    5.Grayscale 函数
    img {
        -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
        filter: grayscale(50%);
    }
    
    6.hue-rotate() 函数
    img {
        -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */
        filter: hue-rotate(90deg);
    }
    
    7.Invert 函数
    img {
        -webkit-filter: invert(100%); /* Chrome, Safari, Opera */
        filter: invert(100%);
    }
    
    8.Opacity 函数
    img {
        -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */
        filter: opacity(30%);
    }
    
    9.Saturate 函数
    img {
        -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */
        filter: saturate(800%);
    }
    
    10.Sepia 函数
    img {
        -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */
        filter: sepia(100%);
    }
    
    复合用法
    img {
        -webkit-filter: contrast(200%) brightness(150%);  /* Chrome, Safari, Opera */
        filter: contrast(200%) brightness(150%);
    }
    
    全部实例
    .blur {
        -webkit-filter: blur(4px);
        filter: blur(4px);
    }
    
    .brightness {
        -webkit-filter: brightness(0.30);
        filter: brightness(0.30);
    }
    
    .contrast {
        -webkit-filter: contrast(180%);
        filter: contrast(180%);
    }
    
    .grayscale {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }
    
    .huerotate {
        -webkit-filter: hue-rotate(180deg);
        filter: hue-rotate(180deg);
    }
    
    .invert {
        -webkit-filter: invert(100%);
        filter: invert(100%);
    }
    
    .opacity {
        -webkit-filter: opacity(50%);
        filter: opacity(50%);
    }
    
    .saturate {
        -webkit-filter: saturate(7);
        filter: saturate(7);
    }
    
    .sepia {
        -webkit-filter: sepia(100%);
        filter: sepia(100%);
    }
    
    .shadow {
        -webkit-filter: drop-shadow(8px 8px 10px green);
        filter: drop-shadow(8px 8px 10px green);
    }
    
    感觉不错给个赞吧!!

    原文:https://www.runoob.com/cssref/css3-pr-filter.html

    展开全文
  • ffmpeg实现视频马赛克特效

    千次阅读 2020-01-07 16:47:24
    ffmpeg实现视频马赛克特效 boxblur实现 对区域图层做模糊效果后再叠加到原来的图层上 ffmpeg -t 10 -i input.mp4 -filter_complex “[0:v]crop=w=100:h=100:x=300:y=300,boxblur=luma_radius=25:luma_power=2...
  • 这种不健全的一种表现就是,当你为半透明PNG图片(或使用半透明PNG作为背景的元素)设置透明度时,PNG图片半透明部分会显示为黑色(但不透明部分的显示是正常的)。 值得一提的是,IE 实现透明度是通过其私有的 ...
  • 其中,涉及到的透明背景,和去除横纵坐标,代码是 fig = plt.figure(facecolor='none') 和 plt.axis('off') 所有画图的代码如下。 # -*- coding:utf-8 -*- import numpy as np import matplotlib.pyplot as plt x =...
  • 只需要在canvas画完图片之后吧保存图片这个函数用异步来实现即可。比如: ... ... context.draw(); setTimeout(() => { this.drawAfter(); }, 200); drawAfter: function () { wx.canvasToTempFilePath({ ...
  • JS控制层背景半透明

    2012-08-19 11:08:04
    半透明效果 filter: Alpha(Opacity=50); 线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140); 放射透明 filter: Alpha(Opacity=10, FinishOpacity...
  • 300+ 精美对话框/气泡 软件提供各类精美对话框,黑白对话框,彩色对话框,透明对话框,半透明对话框,线条对话框等应有尽有,形态各异,适用于多种视频主题。 1W+ 音频资源 电闪雷鸣声,各类乐器声,虫鸣鸟叫声,...
  •  实例182 制作半透明渐显窗体 235  实例183 使窗体背景色渐变 236  实例184 随机更换主界面背景 237  实例185 磁性窗体的设计 238  实例186 制作鼠标穿透窗体 246  实例187 窗体换肤程序 247 8.4 窗体...
  • RGBA色彩空间和Alpha通道 RGBA是代表Red(红色)Green(绿色)Blue(蓝色)和Alpha的色彩空间,虽然它有的时候被描述为一个颜色空间,但是它其实仅仅是在RGB色彩空间上...为实现图形的透明效果,采取在图形文件的处...
  • 当视频速度加快的时候,关联的音频速度也加快,这是声调变高,为了降调可以使用: 音频特效-高音换挡器,预设中选择伸展并调整音阶和音分等 或者直接调整变调比率。会获得不那么高的调子,但是音频速度依然是较快...
  • 背景透明 set opaque_background,off 图像清楚 ray 3000 存图 png a.png, dpi=300 注意,a.png是在c:Python27/PyMOL下 (如果你是按默认安装的话,我是win 64.)
  • 前端常见图片格式整理

    千次阅读 2016-06-26 22:30:32
    前端常见图片格式整理
  • //定义每一个马赛克的块的边长 如果原图像是800*500 那么设置size=16 长和宽都能被16整除 根据特定的长宽设置size var size=4 //模糊像素点获取 参考的是正方形的面积 var totalnum=size*size for(var i=0;i;i+...
  • 2.这是一张单纯的图片 图片保存到本地,老规矩,winhex看一看 拉到最后发现 因为做过ctf新手的密码 所以一看就知道unicode 百度站长工具有解码的 可能是我复制出了问题不过答案很明显了key{you are...
  • 图片管理器

    2017-04-25 23:51:56
    Java面向对象程序设计   学期作业项目报告 ...题 目 图片管理器 组 长 崔利欢 组 员 赵志军  谌超尘  陈慧  施凤婷 系 别 软件工程 学 院 软件学院 指导教师 付 伟 讲师       2016年6月11日
  • js 各种图片特效

    2014-05-31 12:56:00
    这是个很常见的图片显示特效,当鼠标经过图片的时候,图片上浮动一个半透明的层,层内显示文字,同时图片边框变亮,视觉效果相... 用CSS实现图片的双边框效果 纯CSS实现图片的双边框修饰效果,鼠标经过图片...
  • 图片编码介绍

    2012-05-16 13:51:42
    支持Alpha通道的透明/半透明特性。 支持图像亮度的Gamma校准信息。 支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息 使用无损压缩。 渐近显示和流式读写,适合在网络传输中快速显示预览...
  • Snipaste

    千次阅读 2019-03-12 17:05:18
    你还可以将剪贴板里的文字或者颜色信息转化为图片窗口,并且将它们进行缩放、旋转、翻转、设为半透明,甚至让鼠标能穿透它们!如果你是程序员、设计师,或者是大部分工作时间都在电脑前,贴图功能将改变你的工作方式...
  • convert功能强大,用来处理图片的fang'd
  • 与Windows有些相似的布局(点击看大图) 3) 开始菜单 开始菜单使用了类似Win7设计,半透明的“毛玻璃”很酷,再配合全彩的图标设计,给人以完全不同于Windows的感觉。打开后首先显示的是最近用过的应用,下方则是全部...
  • 人生不易且无趣,一起找点乐子吧。欢迎评论,和文章无关的也可以。 (写个新的系列,图片处理。名字是很高级,但是我们能做的很low,先...(看完这个系列的东西,对于一些简单的图片处理就不需要再继续依赖于...
  • div 透明

    2014-05-27 15:26:27
    ie div透明代码 黑白照片 filter: gray;  ...X光照片 filter: Xray;...风动模糊 filter: blur(add=true,direction=45,strength=30);...正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=...半透明效果 fil
  • 有些时候设计页面,纯白纯黑色贴上去感觉好堵,想要一种通透感,加半透明的话背景透出来信息显得乱糟糟的不美观,这时候就需要用到背景模糊了。 经典例子就是QQ,给人最直观视觉感受就是通透,既能区分列表和标签栏...
  • android安卓源码海量项目合集打包-1

    万次阅读 多人点赞 2019-06-11 16:16:24
    │ │ 自定义Edittext 带删除按钮的 Edittext 附带旋转透明动画效果,当输入内容时 右侧的删除按钮会出现,当输入框为空时 按钮会隐藏.rar │ │ 自定义EditText带加减的.rar │ │ 自定义固定头文字的多行文本编辑...
  • 1、首先找到一张图片,比如:c:\abc.png 2、建立一个.html文件,如:test.html,里面可以就一句话: 3、用IE打开,看到的就是黑白照片。(火狐等其他浏览器不支持) 原理:其实就是应用的CSS滤镜。一般人...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 579
精华内容 231
关键字:

半透明马赛克图片