CSS3 filter(滤镜) 制作图片高斯模糊无需JS

作者 : 枫瑞博客 本文共1424个字,预计阅读时间需要4分钟 发布时间: 2019-07-5 共3.35K人阅读

 CSS3 filter(滤镜) 制作图片高斯模糊无需JS

这是一个寂寞的工作日,因为没有女盆友所以很寂寞,因为很寂寞所以来写教程。希望再看教程的你也是单身!啊,知道你是单身枫瑞贼开心!爽的一B!!!起初我在不停的切图,UI小姐姐问了我一个问题关于图片高斯模糊的问题。PS制作高斯模糊就1分钟搞定,那对于程序员来说难吗?无法就是JS处理或者CSS3的filter滤镜处理

首先素材图片,看这是枫瑞女盆友,你们以及没机会了。小姐姐是我的了!(源文件中会打包)

CSS3 filter(滤镜) 制作图片高斯模糊无需JS 枫瑞博客网

我们先聊下一下基础:

1.filter:blur

filter 属性定义了元素(通常是<img>)的可视效果,blur属性给图像设置高斯模糊。”radius”一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;举个栗子

filter: blur(5px);

2.background: inherit;

值为inherit,则继承父元素属性

3.position: relative;

relative是相对定位,是相对于前面的容器定位的

4.position: absolute;

absolute这个是绝对定位;是相对于浏览器的定位

通俗说就是相对定位的绝对定位,relative是父,absolute是子。更具相对定位,来决定绝对定位的位置(怕新手会对这2个搞混)

5.overflow: hidden;

隐藏溢出,一个div大小为100,我图片为200,多余出来的就隐藏

好的先做开始我们的教程CSS3 filter(滤镜) 制作图片高斯模糊

方式一:直接使用flute

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3 filter(滤镜) 制作图片高斯模糊</title>
		<style>
			.gg{
				filter: blur(3px);/* 高斯模糊 */
				margin: 10% 35%;/* 让图片靠中间 */
			}
		</style>
	</head>
	<body>
		<img class="gg" src="111.png" />
		
	</body>
</html>

效果图:可以看到图片有模糊效果但是边缘也模糊了

CSS3 filter(滤镜) 制作图片高斯模糊无需JS 枫瑞博客网

方式二:定位模式处理图片边缘不模糊

方式二的原理是在图片上在用另一个一个div来做模糊效果然后覆盖上去,方式一是对图片直接做模糊效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3 filter(滤镜) 制作图片高斯模糊</title>
		<style>
			.feng{
				background: url(111.png) no-repeat;/* 引入背景图片 */
				position: relative;/* 相对定位 */
				width: 380px;/* 作为背景引入要给高宽 */
				height: 385px;/* 作为背景引入要给高宽 */
				margin: 10% 35%;/* 让图片在中间一点随意写下 */
			}
			.rui{
				 position: absolute;/*绝对定位 */
				background: inherit;/* 继承属性 */
				width: 380px;/* 给div高宽 */
				height: 385px;/* 给div高宽 */
				filter: blur(5px);
			}
		</style>
	</head>
	<body>
		<!-- 图片 -->
		<div class="feng">
			<!-- 高斯模糊 -->
			<div class="rui"></div>
		</div>
		
	</body>
</html>

效果图

CSS3 filter(滤镜) 制作图片高斯模糊无需JS 枫瑞博客网

枫瑞博客网 一个只想努力找富婆不想努力的人
枫瑞博客网 » CSS3 filter(滤镜) 制作图片高斯模糊无需JS

常见问题FAQ

枫瑞你想努力吗?
不 ,我只想找富婆

发表评论