前端背景图片模糊较好的办法

效果：解决了filter模糊和添加伪元素会模糊文字以及糊边的痛点

代码都贴过来了，但关键代码只有一行：backdrop-filter: blur(5px)

其思想就是在背景图片的盒子下一级放一个同样大小的盒子，相当于遮罩层

<style>* {margin: 0;padding: 0;}.demo {width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;}.photo_object {width: 80%;height: 80%;background: url(https://img1.baidu.com/it/u=3388724121,114678878&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281) center / cover no-repeat;}.vague {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;/* 关键代码 */backdrop-filter: blur(5px);}span {color: white;font-size: 50px;}
</style><body><div class='demo'><div class='photo_object'><div class='vague'><span>这是文字</span></div></div></div>
</body>

效果如下：

注：并非纯自创，只为了记录个人开发过程中的一些方法及解决思路。

前端背景图片模糊较好的办法相关推荐

设置背景图片模糊，内容不模糊
设置背景图片模糊,内容不模糊需求:一个div设置了background-image,现在需要使背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊 ...
Html设置背景图模糊,CSS设置背景图片模糊内容不模糊的解决方法
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 解决方法:内容和图片分别置于一个div,通过css设置背景div模糊度,设置内容div绝对位置, ...
android 背景磨砂效果,跨浏览器磨砂效果背景图片模糊特效
background-blur是一款非常炫酷的跨浏览器磨砂效果背景图片模糊特效jQuery插件.它会抽取图片的主要色彩,并通过SVG过滤器来制作模糊效果.并且它还通过velocity.js来提供额外的 ...
css背景图不失真_CSS实现页面背景图片模糊内容不模糊的方法
CSS实现页面背景图片模糊内容不模糊的方法,如果对你有帮助就看看吧,挺实用的一个CSS背景模糊效果,适合做一些非常唯美的网页,给人一种很模糊却又带着一丝清晰的感觉. 代码: Document .ban ...
css设置背景图片模糊，文字清晰展示
css设置背景图片模糊,文字清晰展示使用filter: blur来实现,blur的值越大越模糊效果图: html: <div class="box"><p&g ...
C# Winform的panel控件添加背景图片后窗体闪烁问题解决办法
C# Winform的panel控件添加背景图片后窗体闪烁问题解决办法参考文章: (1)C# Winform的panel控件添加背景图片后窗体闪烁问题解决办法 (2)https://www.cnbl ...
css 背景图片模糊遮罩效果
思路在父元素上之上利用绝对定位再加一个图层并调整该图层的透明度顺便一提:熟悉ps或pr的应该知道这图层叫做遮罩或者蒙版方法利用:after伪元素 dom元素 <div className= ...
div图片背景虚化不影响图片上的文字_背景图片模糊，其中文字清晰实现方法总结...
先上效果图: 之前: 之后: 实现方式: 第一种:两张图片叠加,上面放一个纯白色的,下面放这张清晰的医生的图第二种:背景图片上面,使用一层遮罩,设计背景色为纯白色,并且是有一定透明度的背景模糊文字 ...
前端——背景图片显示以及悬浮状态下变色的情况
前言最近搞了一个项目,几乎全是前端的东西: 以前,前端的东西很少做,所以现在做起来比较吃力: 对于一些我认为比较难的地方,在这里专门记录一下,以便于后期遇到了可以查看 (主要是脑子记不住啊!O(∩_ ...

前端背景图片模糊较好的办法

效果：解决了filter模糊和添加伪元素会模糊文字以及糊边的痛点

前端背景图片模糊较好的办法相关推荐

最新文章

热门文章