CSS3滤镜filter: blur,使图片或背景模糊(毛玻璃)

CSS毛玻璃效果可以通过filter: blur()实现，类似PS高斯模糊，图片和背景都可以使用；但在移动端，会造成卡顿，不建议在移动端使用；

CSS:

.blur{-webkit-filter: blur(5px);-moz-filter: blur(5px);-o-filter: blur(5px);-ms-filter: blur(5px);filter: blur(5px);
}
.jay{width: 300px;height: 180px;
}
.bg{background: url(img/jay.jpg);background-size: cover;background-position: center;
}

HTML:

<!--背景模糊-->
<div class="jay bg blur"></div>
<!--原图-->
<div class="jay bg"></div>
<!--图片模糊-->
<div class="jay"><img src="img/jay.jpg" class="blur" width="300"/>
</div>

效果如图（图片来自百度/周杰伦）

CSS3滤镜filter: blur,使图片或背景模糊(毛玻璃)相关推荐

css3滤镜Filter使用
Filter主要用于图片,SVG等元素上,其默认值是none,有以下10个filter-function值可选: grayscale(灰度)效果类似于PS中的去色或者黑白 blur(模糊)效果类似于P ...
图片使用css3滤镜改变图片颜色
图片使用css3滤镜改变图片颜色使用css3滤镜改变图片的颜色代码如下使用css3滤镜改变图片的颜色我们在开发页面的时候,会遇到同一张图片滑过或点击的时候改变图片背景或颜色,一般情况下UI设计 ...
css怎么使图片变暗些
css中,可利用filter属性和brightness()函数来让图片变暗,filter属性用于设置图片元素的可视效果,配合brightness()使用可调整图片的亮度,语法为"图片元素{f ...
CSS3的滤镜filter属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊二.brightnes ...
css3滤镜属性filter实现网页变黑白效果
前言在特殊的日子里,很多网站页面都是黑白色的,其实用css3滤镜属性filter让网页马上变黑白,一行代码就搞定. 网页变黑白代码实现方法1:在你的css里加上以下代码即可,网页马上变黑白: ht ...
使用CSS3滤镜让图片反转颜色
CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...
Filter Effects - 使用 CSS3 滤镜处理图片
CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果.这里给大家分享的这个网站,大家可以体验下 CSS3 对图片的处理 ...
HTML5 viewport 标签与 CSS3 background-size 属性使图片完全适应区域内容
要使一张图片不论在移动端还是在桌面端都能适应区域内容,可以使用 HTML5 的 viewport 标签结合 CSS3 的 background-size 属性. 适应区域内容是指图片的宽或高的长度满足 ...
关于滤镜的使用，使图片默认为全灰色
在编写该代码时, [color=red]a:link img{ filter:gray;}[/color] 发现图片没有任何变化,则要考虑该浏览器是否兼容,可参考以下代码,在考虑所有浏览器兼容的情况下 ...

CSS3滤镜filter: blur,使图片或背景模糊(毛玻璃)

CSS3滤镜filter: blur,使图片或背景模糊(毛玻璃)相关推荐

最新文章

热门文章