html中实现图片虚化

CSS3 Filter(滤镜)实现对图片元素模糊处理；让大家了解如何设置图片元素的模糊效果，通过实例介绍filter实现图片高斯模糊的三种效果。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

什么是filter (滤镜)
CSS3 Filter(滤镜)属性定义了元素(通常是)的可视效果，提供了模糊和改变元素颜色的功能。CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。

下面看看filter这个属性，现在规范中支持的效果：grayscale(灰度)：值为0-1之间的小数
sepia(褐色)：值为0-1之间的小数
saturate(饱和度)：值为num
hue-rotate(色相旋转)：值为angle
invert(反色)：值为0-1之间的小数
opacity(透明度)：值为0-1之间的小数
brightness(亮度)：值为0-1之间的小数
contrast(对比度)：值为num
blur(模糊)：值为length(radius)
drop-shadow(阴影)
实现模糊效果的filter 语法：filter: blur();

1.css普通图片模糊效果(整张图片全模糊)

.bg {
width: 1240px;
height: 592px;
position: relative;
background: url("2.png") no-repeat fixed;
padding: 1px;
box-sizing: border-box;
z-index: 1;
}
.bg:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(2px);
z-index: 2;
}
.drag {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
text-align: center;
z-index: 11;
}

2.css图片局部模糊效果

.bg {
width: 1240px;
height: 592px;
background: url("2.png") no-repeat fixed;
padding: 1px;
box-sizing: border-box;
z-index: 1;
}

.drag {
margin: 100px auto;
width: 300px;
height: 300px;
background: inherit;
position: relative;
text-align: center;
}
.drag>div {
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
z-index: 11;
}
.drag:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: inherit;
filter: blur(30px);/*为了模糊更明显，调高模糊度*/
z-index: 2;
}

版权说明：文章[非商业性质]，有大量文章来源网络各处，本站只做收集，侵权联系删除。