zoukankan      html  css  js  c++  java
  • CSS如何将图像转换为模糊图像?

    在CSS中,可以使用filter属性来模糊处理图像;filter属性用于将图像转换为模糊图像。该属性主要用于设置图像的视觉效果。

    语法:

    filter: blur()

    属性值:

    ● blur():给图像设置高斯模糊,值越大越模糊。如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。

    示例1:使用filter: blur()来模糊图像

    原图:

    <!DOCTYPE html> 
    <html> 
    	<head> 
    	   	<meta charset="UTF-8">
    	   	<style>  
                img {  
                    -webkit-filter: blur(4px);  
                    filter: blur(4px);  
                }  
                h1 {  
                    color:green;  
                }  
            </style>
    	</head> 
    <body> 
        <center>  
            <img src= "1.jpg" width="500px" alt="filter applied" />  
            </center>  
        </body>  
    </html>

    效果图

    示例2:创建背景模糊图像

    <!DOCTYPE html> 
    <html> 
    	<head> 
    	   	<meta charset="UTF-8">
    	   	<style>  
                img {  
                    -webkit-filter: blur(4px);  
                    filter: blur(4px);  
                    margin-top: 20px;
                }  
                h1 {  
                    color:red;  
                }  
                .backgr-text { 
                    position: absolute; 
                    top: 20%; 
                    left: 50%; 
                    transform: translate(-50%, -50%); 
                    text-align: center; 
                }  
            </style>
    	</head> 
    <body> 
        <center>  
            <img src= "1.jpg" width="500px" alt="filter applied" />  
            <div> 
                    <h1>Hello World</h1> 
                    <h2>Blurred Background Image</h2> 
                </div>
            </center>  
        </body>  
    </html>
  • 相关阅读:
    修改程序堆栈的可执行属性
    【转】关于C语言生成不重复的随机数
    Apriori算法
    远程连接服务器端Jupyter Notebook
    Android KeyLogger Demo
    Windows消息钩取
    基址重定位表&.reloc节区
    调试UPX压缩的notepad
    PE文件格式
    apk逆向
  • 原文地址:https://www.cnblogs.com/ypppt/p/12845959.html
Copyright © 2011-2022 走看看