CSS3图片模糊效果

最新推荐文章于 2024-04-26 22:25:00 发布
最新推荐文章于 2024-04-26 22:25:00 发布
阅读量1.4k 收藏
点赞数 1
分类专栏： 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sc_jelly/article/details/39472169
版权
前端 同时被 2 个专栏收录
10 篇文章 0 订阅
订阅专栏
css3
2 篇文章 0 订阅
订阅专栏

 今天我们来分享一款利用CSS3技术让图片模糊的效果，我们只需要将鼠标滑过图片，就可以让图片产生模糊的特效，利用CSS3实现图片模糊效果也非常简单，用CSS3中的filter属性即可，针对不同浏览器用-webkit-filter、-moz-filter、-o-filter和-ms-filter。


效果预览

凉粉zzz
关注
专栏目录
CSS3滤镜filter: blur,使图片或背景模糊(毛玻璃)
12-28
通过filter: blur()实现CSS毛玻璃效果，类似PS高斯模糊，图片和背景都可以使用；但在移动端，会造成卡顿，不建议在移动端使用；
CSS3:图片模糊
qq_54517101的博客
08-11 210
用到 filter:blur() 属性，里面数字越大，图片约模糊。
css3图片变模糊
m0_51495354的博客
11-21 242
用css3做出使图像变模糊的样式
css3图片模糊处理
lxllxl211的博客
10-12 253
blur里面的数值越大越模糊。
css3特性-使图片变模糊
最新发布
h131425q的博客
04-26 314
* blur 是一个函数 小括号里面数值越大，图片越模糊 单位px */
CSS3图片模糊效果源码.zip
11-02
本文将深入探讨CSS3图片模糊效果的相关知识点，并基于提供的"CSS3图片模糊效果源码.zip"进行分析。 首先，我们来了解CSS3中的`filter`属性。`filter`属性允许我们应用图像过滤器效果到元素上，包括模糊、灰度、对比...
12种炫酷CSS3图片切换过渡效果
12-29
【CSS3图片切换过渡效果详解】 CSS3是 Cascading Style Sheets 的第三个主要版本，它引入了许多新特性，其中最引人注目的就是丰富的动画和过渡效果。这些效果为网页设计带来了前所未有的动态视觉体验，特别是在图片...
基于CSS3实现图片模糊过滤效果
01-19
css3图片过滤效果，鼠标放上后其它图片模糊，鼠标所在位置的图片是清淅的，有效索引出当前的图片，对图片的模糊处理是本特效的亮点，你完全可以将模糊的效果应用于其它的图片特效中，你同样也可借此代码研究一下...
CSS3中图片模糊处理的方式
weixin_51415327的博客
08-23 237
添加filter属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <.
css3图片模糊处理（76）
weixin_45147894的博客
06-21 185
css3图片模糊效果是利用滤镜来做的，我们先简单学习一个，后面会有更多图片处理效果呀！
CSS3图片模糊切换效果
web前端入门基础进阶教程-htmlcssjs
05-18 291
今天我们来分享一款利用CSS3技术让图片模糊的效果，我们只需要将鼠标滑过图片，就可以让图片产生模糊的特效，利用CSS3实现图片模糊效果也非常简单，用CSS3中的filter属性即可，针对不同浏览器用-webkit-filter、-moz-filter、-o-filter和-ms-filter。 <!DOCTYPE html> <html> <head> <title>css3图片过滤效果 </title> <style> body{
Css3 模糊、背景裁切、线性渐变属性、控制placeholder的样式
林中明月间丶
03-24 545
img{   filter:blur(10px);模糊10个像素}background-clip:（背景裁切） 1.border-box;默认 2.padding-box;填充区域 3.content-box;(一般为内容裁切)盒模型：border：边框区域；padding:内填充;content:内容区；background:linear-gradient();线性渐变background:li...
自己模糊不定的css样式
Mh_ui的博客
08-08 295
1.居中 text-align:center 是相对于子元素的居中，只对行内元素起作用 margin:0 auto 是相对于自己的居中，对块元素起作用 2.position定位 position：relative 相对定位 （生成相对定位的元素，相对于其正常位置进行定位） 相对定位会按照元素的原始位置对该元素进行移动 position: absolute 绝对定位 （生成绝对定位的...
css背景图片高斯模糊_css3实现背景模糊的三种方式(小结)
weixin_34900758的博客
03-03 3116
一、普通背景模糊代码：html,body {width: 100%;height: 100%;}* {margin: 0;padding: 0;}/*背景模糊*/.bg {width: 100%;height: 100%;position: relative;background: url("./bg.jpg") no-repeat fixed;background-size: cover;box...
CSS3你可能不知道的冷知识
尐轩web前端网络日志
12-02 4310
可能我们在看一些网页的源码时 会发现自己从来没见过的属性或用法 今天我就来总结一下 CSS3的冷知识 样式计算在CSS中也可以进行简单的计算 通过calc函数可以实现 这样还可以使我们的元素自适应 当然计算的值应该是合法的值.demo { ... width: calc(100% - 500px); height: 200px; }这个demo中，元素的宽度值是
css 设置背景图片模糊效果
热门推荐
凌风的博客
07-17 2万+
效果： html: &lt;div class="head_channel"&gt; &lt;div class="head_box"&gt; //这里是内容区域 &lt;/div&gt; &lt;div class="blur_bj"&gt; &lt;img src="https://
CSS3 设置模糊背景图片
俊刚的博客
11-08 2万+
使用方法： -webkit-filter: blur(5px); /* Chrome, Safari, Opera */     filter: blur(5px); blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊； 如果没有设定值，则默认是0；这个参数可设置css长度值，但不
css3图片 变黑白 变模糊 调整饱和度等
weixin_30291791的博客
10-09 365
<!DOCTYPE html> <html> <head> <title>CSS3 filter(滤镜) 属性</title> <style> img { width: 33%; height: auto; float: left; } .blur {-webk...
css 图片高斯模糊效果
02-04
CSS中可以通过使用`filter`属性来实现图片的高斯模糊效果。具体的步骤如下： 1. 首先，需要给图片添加一个容器，可以使用`<div>`元素或者其他适当的元素。 2. 在容器中插入图片，可以使用`<img>`元素或者作为背景图像。 3. 使用CSS的`filter`属性来实现高斯模糊效果。设置`filter`属性的值为`blur()`，并指定模糊的程度。 下面是一个示例代码，展示如何实现图片的高斯模糊效果： ```html <!DOCTYPE html> <html> <head> <style> .container { position: relative; width: 400px; height: 300px; } .blur-image { width: 100%; height: 100%; filter: blur(5px); /* 模糊程度可以根据需要进行调整 */ } </style> </head> <body> <div class="container"> <img src="example.jpg" alt="Example Image" class="blur-image"> </div> </body> </html> ``` 在上面的示例中，`.container`类定义了一个容器，`.blur-image`类定义了图片的样式，并使用了`filter: blur(5px)`来实现5像素的高斯模糊效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值