css实现背景模糊效果

最近在工作中写样式的时候碰到如图这样的背景模糊效果，思来想去没有合适的方法。后查询相关资料后得出解决方案

方法：background-color + backdrop-filter 来配合实现

backdrop-filter css属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

例：

<div class="container"><div class="box"><p>backdrop-filter: blur(10px)</p></div>
</div>

html,body {height: 100%;width: 100%;}body {background-image: url(https://picsum.photos/id/1080/6858/4574), linear- gradient(rgb(219, 166, 166), rgb(0, 0, 172));background-position: center center;background-repeat: no-repeat;background-size: cover;}.box {/* 重点设置下面两个属性 */background-color: rgba(255, 255, 255, 0.3);backdrop-filter: blur(10px);-webkit-backdrop-filter: blur(5px);border-radius: 5px;font-family: sans-serif;text-align: center;line-height: 1;max-width: 50%;max-height: 50%;padding: 20px 40px;color: #fff;}.container {align-items: center;display: flex;justify-content: center;height: 100%;width: 100%;}

效果图：

可自行设置想要的背景色和blue数值来达到想要的模糊效果~

参考：backdrop-filter 属性介绍

css实现背景模糊效果相关推荐

html css部分背景模糊效果,CSS3实现模糊背景的三种效果示例
不开头了,直接进入主题. 普通背景模糊效果如下: 使用属性: filter:(2px) 普通背景模糊为了美观不能使背景前的文字模糊,而filter属性会使这整个div的后代并且还会出现白边.也就是说 ...
CSS实现背景模糊效果（高斯模糊）
px值越大,越模糊,可以按照不同的类名给不同的模糊值,背景看起来会更好看一点重点实现为: -webkit-filter: blur(10px); /* Chrome, Opera */-moz-fi ...
uniapp去掉顶部导航栏后计算手机安全区距离，css背景模糊效果
问题: 1.uniapp去掉顶部导航栏后计算手机安全区距离 2.模糊背景的局部清晰 3.去除overflow: auto:带来的滚动条(没有滚动条也可以滚动) 4.监测页面滑动使用的方法 5.data ...
css文字背景虚化,通过实现背景模糊、文字颜色流光渐变、边框扩展等效果学习transition、transform、@keyframes等属性及伪元素的使用...
百度前端技术学院2017于2月24日开始进行,一共有6个学院可供学习,分别是小薇学院(html/css基础).斌斌学院(js基础).耀耀学院(小游戏/交互).商业平台学院(web/ios/androi ...
开源超美css动态背景可直接引入html文件使用含注释、可更改
开源超美css动态背景可直接引入html文件使用含注释.可更改 1.背景样式本背景为动态蜘蛛网背景. 上图: 2.如何在html里面引用,作为html背景 1文件目录放在同一目录下 2 在in ...
php设置背景图片的代码,css设置背景图片如何实现？（代码实例）
本篇文章给大家带来的内容是关于css设置背景图片如何实现?(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 很多人提交表单时都喜欢用一个图片来作为提交按钮,大多数人可能用J ...
学习CSS的背景图像属性background
CSS的背景属性"background"提供了众多属性值,如颜色.图像.定位等,为网页背景图像的定义提供了极大的便利.看看background提供的属性值: background ...
php设置背景为透明,css如何设置背景颜色透明？css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
css样式教程---css控制背景图片-背景相关的css
最近做网站的时候,感觉css使用并不是那么轻松,于是从网上找了点教程看看,感觉还是挺重要的,一个好的CSS代码,只要你熟悉了,以后拿过来之间套上就行了, 真是方面,但是看的那CSS代码总叫人感觉头大, ...

css实现背景模糊效果

css实现背景模糊效果相关推荐

最新文章

热门文章