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

最新推荐文章于 2023-03-08 13:09:18 发布

前端设计诗

最新推荐文章于 2023-03-08 13:09:18 发布

阅读量658

点赞数

分类专栏： HTML5 CSS3

本文链接：https://blog.csdn.net/weixin_45416217/article/details/104472193

版权

CSS3 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

HTML5

2 篇文章 0 订阅

订阅专栏

1、fliter: blur
filter 属性定义了元素(通常是)的可视效果，blur属性给图像设置高斯模糊。”radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；

filter: blur(5px);

2、方式一直接使用flute

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

这是原图
在这里插入图片描述
这是模糊后的图片

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

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

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

前端设计诗

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3 filter(滤镜) 制作图片高斯模糊无需JS

1、fliter: blurfilter 属性定义了元素(通常是)的可视效果，blur属性给图像设置高斯模糊。”radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；filter: blur(5px);2、方式一直接使用flute<!DOCTYPE html><html> <head> <meta...
复制链接

扫一扫