filter滤镜实现img图片的CSS蒙版效果、模糊效果

最新推荐文章于 2024-02-19 18:12:57 发布

草巾冒小子

最新推荐文章于 2024-02-19 18:12:57 发布

阅读量4.2k

点赞数 1

分类专栏： CSS 3 img图片处理文章标签： css img

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/80758473

版权

CSS 3 同时被 2 个专栏收录

60 篇文章 3 订阅

订阅专栏

img图片处理

42 篇文章 2 订阅

订阅专栏

文章目录

```filter滤镜```实现```img图片```的CSS```蒙版效果、模糊效果```

`filter滤镜`实现`img图片`的CSS`蒙版效果、模糊效果`

项目中我们经常会遇到这样的需求：图片在鼠标经过或者悬停的时候，出现一层模糊的蒙版效果。

这里将会用到：filter这一属性。

文章目的：总结一下该属性，及img图片模糊的蒙版效果的实现方法。

下面我们就来总结一下，这层模糊的蒙版效果的实现方法。

首先看一下效果图。

1. 效果图

filter效果前后

2.代码实例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>demo</title>
	<style>
		/*图片的蒙版效果*/
		.div{width: 500px;height: 500px;}
		.div:hover .img {
		    filter: url(blur.svg#blur);
		    -webkit-filter: blur(2px); /*像素值越大，越模糊*/
		    -moz-filter: blur(2px);
		    -ms-filter: blur(2px);
		    filter: blur(2px);
		    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=2, MakeShadow=false);
		}

		.div .img {
		    width: 100%;
		    float: left;
		    display: inline;
		}
	</style>
    

  </head>
  <body>  	
	<div class=".div">
		<img class=".img" src="statics/images/xablt_images/about/manager/huangweidong.png"/>
	</div>
  </body>
</html>

注意：

旧版Internet Explorer浏览器（4.0 to 8.0）支持的非标准“filter”属性已被废弃。IE8及更低版本浏览器通常使用 opacity属性。
浏览器的厂商标识；
filter里面的像素值越大，越模糊；为0px时，没有模糊效果。

3.兼容性对比

这里写图片描述

更多细节描述与讲解，请参考网站 www.runoob.com

以上就是关于 “ filter实现了img图片的CSS蒙版效果、模糊效果 ”的全部内容。

草巾冒小子

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
filter滤镜实现img图片的CSS蒙版效果、模糊效果

filter滤镜实现img图片的CSS蒙版效果、模糊效果项目中我们经常会遇到这样的需求：图片在鼠标经过或者悬停的时候，出现一层模糊的蒙版效果。这里将会用到：filter这一属性。文章目的：总结一下该属性，及img图片模糊的蒙版效果的实现方法。下面我们就来总结一下，这层模糊的蒙版效果的实现方法。首先看一下效果图。1. 效果图...
复制链接

扫一扫