目录

chen 的个人博客

VX:ZzzChChen
Phone:13403656751
Email:zxydczzs@gmail.com

X

PS、CSS使图片高斯模糊

一、PS 图片高斯模糊

1、打开 ps,将图片导入。

image.png

2、菜单栏选择滤镜-模糊-高斯模糊

image.png

3、将半径修改即可,值越大越模糊。

image.png

二、CSS 调整图片高斯模糊

1<img src="https://m1.shanhelinks.com/static/img/mpbackground/bgshexiang.jpg">
2		<div class="backgr-text">
3			<h1>Hello World</h1>
4			<h2>Blurred Background Image</h2>
5		</div>
 1                <style>
 2			img { 
 3						width: 100%;
 4						height: 2048px;
 5		                -webkit-filter: blur(4px);  
 6		                filter: blur(15px);  
 7		                margin-top: 20px;
 8		            }  
 9		            h1 {  
10		                color:red;  
11		            }  
12		            .backgr-text { 
13		                position: absolute; 
14		                top: 20%; 
15		                left: 50%; 
16		                transform: translate(-50%, -50%); 
17		                text-align: center; 
18		            }  
19		</style>

filter: blur(15px):blur 中的值越高越模糊

image.png


标题:PS、CSS使图片高斯模糊
作者:zzzzchen
地址:https://www.dczzs.com/articles/2021/06/21/1624258823578.html