CSS鼠标悬浮图片模糊切换效果
当我们想设置在鼠标移入前，图片是半透明（模糊）的，在我们鼠标移入后，图片就变得清晰，这里我们可以设置css的伪类：hover来实现：
首先我们在body中写一个div模块，这个div包裹了两个部分，一个部分就是我们要用的img，第二部分就是文字，文字部分也用一个div包裹。
如下图所示：
鼠标移入前：
鼠标移入后：
在这个图片里面大家可以明显的感觉到图片在文字的背后，而且是模糊的，那我们要怎么做才能将其背后的图片显示出来呢？要想知道背后的图片是怎么显示出来的，那我们要先把图片是怎么放在背后这个点搞清楚。
1.背景图片嵌入在文字背后
在这个地方是一个难点就是，我们怎么将图片放在文字背后呢？
注意：我们的目标是让最外面的框的高度=img的高度，然后文字在上面，在这里我选择的办法是让最里面的块脱离文档流，利用position的相关属性。
- 1.首先先设置最外面的块css样式为position：relative；
这里设置最外面的块为相对定位，不脱离文档流，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。 - 2.第二步就是设置最里面的css样式为position：absolute；
这里脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。
这样设置后三个块就可以重合了。
2.将背景图片设位置模糊/毛玻璃效果
我们完成了第一步之后发现，确实三个块都重合了，但是图片还是清晰的，怎么将它设置模糊效果呢，这里要用到我们的关键属性**filter:blur(5px);**，该属性来实现毛玻璃的效果，让背景看起来模糊，类似于毛玻璃的效果。
img.blur {
-webkit-filter: blur(4px); /*灰度处理*/
filter: blur(4px); /*模糊滤镜*/
}
img.brightness {
-webkit-filter: brightness(0.30);
filter: brightness(0.30); /*亮度滤镜*/
}
img.contrast {
-webkit-filter: contrast(180%);
filter: contrast(180%); /*对比度滤镜*/
}
img.shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green); /*阴影滤镜*/
}
img.huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg); /*色相旋转滤镜*/
}
img.invert {
-webkit-filter: invert(100%);
filter: invert(100%); /*反色滤镜*/
}
img.opacity {
-webkit-filter: opacity(50%);
filter: opacity(50%); /*透明度滤镜*/
}
img.saturate {
-webkit-filter: saturate(7);
filter: saturate(7); /*饱和度滤镜*/
}
记得blur不可以作用在有内容的父元素上，会将子元素都模糊化，如果不想要周边的阴影，可以在父元素上加overflow:hidden；文章来源：https://www.toymoban.com/news/detail-494874.html
3.变模糊的背景变清晰
最后一步就是将模糊的背景显示出本来的样子，这里我们直接将模糊滤镜的里面的属性值变成0就行了，哈哈哈，这里我们还可以加一个transtion使得图片有个0.5s的效果时间，相当于一个动画效果了。
代码如下：文章来源地址https://www.toymoban.com/news/detail-494874.html
filter: blur(0px);
-webkit-filter: blur(0px);
transition: 0.5s ease-in-out;
4.总结：
以上就是鼠标移入时将模糊的背景显示出来的流程，希望能够帮助到大家。
喜欢的点个赞再走吧，谢谢。
到了这里，关于CSS鼠标悬浮图片模糊切换效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
