CSS如何将图像转换为模糊图像?

时间: 2020-02-20阅读: 159标签: 图片

在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>
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/7548

前端获取图片exif信息

对又是我,每天都有新的需求。这次的需求是上传图片的时获取图片的宽高、设备、光圈等信息。pc、android、ios 都支持了,现在就缺少 web 这边上传的图片了。

图片格式区别:png8,png24,jpg,jpeg,gif,webp

色彩丰富的、比较大的图片切成jpg格式,例如一些网站的banner图,WEBP因为体积小,正在被大量网站使用。网站加速的内容一半包含了WEBP这种格式,但是写代码必须考虑部分不支持webp,比如苹果系统的Safari浏览器就不支持。

CSS object-fit 对图片的处理

object-fit:指定可替换元素的内容应如何适应到需使用的高度和宽度确定的框,平时写代码经常会在代码中插入图片,你是否会多少感觉插入的图片被拉伸或是被缩放

图片的预加载与懒加载

由名字可以知道,图片的预加载->当用户需要查看图片可以直接从本地缓存中取到(提前加载下来的),图片的懒加载->是当用户一次性访问的图片数量比较多的时候,会减少请求的次数或者延迟请求,是一种服务器前端的优化

webpack 图片路径问题

今天在学 webpack 时碰到一个问题,就是 webpack 通过插件 file-loader 打包图片后,在最终的 html 文件中图片地址是不对的,只有图片名称是对的,相信应该也有很多和我一样的初学者掉坑了。在 webpack.config.js 的配置文件中添加一个属性

javascript如何判断图片是否存在?

JavaScript在实际应用中,可能有这样的需求,那就是检测一个图片是否存在。下面我们来看一下JavaScript如何判断图片是否存在。

vue引入图片

通过在vue文件引入scss样式文件;如果scss文件有引入背景图片,这里不能使用相对路径了,需要使用~开头的方式,如果 URL 以 ~ 开头,其后的任何内容都会作为一个模块请求被解析。

100多行代码实现js或者jquery版的类似juejin的预览图片功能

预览图片是一个很常用的业务功能,比如掘金的预览图片功能,下面我们就来模拟实现一个类似掘金的简单预览图片功能(PS:最终实现动画效果不如掘金,可自行扩展,还有就是嵌套的元素与掘金的方式也有区别)。

HTML img src图片路径不存在,则显示一张默认图片的方法

我们一般会给图片设置 alt 属性,当图片路径不存在时可以显示提示文字。但是这样很不好看,如果用在文章列表,我们可以给 img 标签设置一个 onerror 属性,可以在 src 路径不存在时显示指定的默认图片

WPF 中如何创建忽略 DPI 属性的图片

WPF 框架设计为与 DPI 无关,但你依然可能遇到 DPI 问题。尤其是 Image 控件显示的图片会根据图片 EXIF 中的 DPI 信息和屏幕 DPI 自动缩放图片。对于 UI 用图来说这是好事

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广