PS、CSS使图片高斯模糊

2021-06-21

一、PS 图片高斯模糊

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

image.png

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

image.png

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

image.png

二、CSS 调整图片高斯模糊

<img src="https://m1.shanhelinks.com/static/img/mpbackground/bgshexiang.jpg">
		<div class="backgr-text">
			<h1>Hello World</h1>
			<h2>Blurred Background Image</h2>
		</div>
                <style>
			img { 
						width: 100%;
						height: 2048px;
		                -webkit-filter: blur(4px);  
		                filter: blur(15px);  
		                margin-top: 20px;
		            }  
		            h1 {  
		                color:red;  
		            }  
		            .backgr-text { 
		                position: absolute; 
		                top: 20%; 
		                left: 50%; 
		                transform: translate(-50%, -50%); 
		                text-align: center; 
		            }  
		</style>

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

image.png


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