用html实现模糊效果,css实现简单背景模糊的方法(代码示例)
本篇文章给大家带来的内容是介绍css实现简单背景模糊的方法(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
使用filter属性来设置模糊值
效果:
css样式:
.cover {
width: 600px;
height: 300px;
position: relative;
text-align: center;
line-height: 300px;
color: #fff;
margin: 20px auto;
}
.cover::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 600px;
height: 300px;
background: transparent url(Images/picture/5.jpg) center center no-repeat;
filter: blur(8px);
z-index: -1;
background-size: cover;
}
HTML结构:
背景模糊,文字清晰显示
用html实现模糊效果,css实现简单背景模糊的方法(代码示例)相关推荐
- html 中箭头的代码,HTML中利用div+CSS实现简单的箭头图标的代码
/*箭头向上*/ .to_top { width: 0; height: 0; border-bottom: 10px solid #ccc; border-left: 10px solid tran ...
- html直线箭头,HTML中利用div+CSS实现简单的箭头图标的代码
在网页设计中,我们经常得会用到一些箭头做为装饰来点缀我们的网页,虽然现在很多的网站的设计者们都喜欢以引用字体图标的形式来实现箭头的效果,但那样也会给网页的加载造成一些影响.今天飞鸟慕鱼小编就给大家说一 ...
- 八叉树 java_java简单实现八叉树图像处理代码示例
一晃工作有段时间了,第一次写博客,有点不知道怎么写,大家将就着看吧,说的有什么不正确的也请大家指正. 最近工作中用到了一个图像压缩的功能.找了一些工具,没有太好的选择.最后选了一个叫jdeli的,奈何 ...
- css table设置边框_(代码示例)css实现等高布局的三种方式
本篇文章给大家带来的内容是关于css实现等高布局的三种方式(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文讲的等高布局是在不手动设置元素高度的情况下,使用纯css实现 ...
- php网页留言本过程,PHP实现简单留言本功能代码示例
这篇文章主要为大家详细介绍了PHP简单留言本功能的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了PHP留言本功能的具体代码,供大家参考,具体内容如下 index.ph ...
- python re 简单实例_Python re.search方法代码示例
本文整理汇总了Python中re.search方法的典型用法代码示例.如果您正苦于以下问题:Python re.search方法的具体用法?Python re.search怎么用?Python re. ...
- php表格好看样式,怎么用css制作好看的表格?【示例】
本篇文章将要给大家详细介绍如何用css制作出好看又简洁的HTML表格.相信大家在接触过HTML相关知识后,或多或少都会自己写点小代码,写个小效果.就比如table表格,我们在浏览各个网站时,总能看到各 ...
- html 点击加号展开代码,纯css实现加号一个的效果(代码示例)
本篇文章给大家带来的内容是关于纯css实现加号一个的效果(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实现下图的加号效果: 若想实现这个效果, 只需一个p元素即可搞定. ...
- css实现简单的告警提示动画效果
需求:css实现简单的告警提示动画效果,当接收到实时信息的时候,页面弹出告警信息的动画效果 <!DOCTYPE html> <html lang="en"> ...
最新文章
- 机器人视觉——图像加法、图像融合、图像类型转换
- Android安卓APK反编译逆向
- CC1101超低功耗无线模块在物联网能门锁中的应用
- npm run dev (明明有.vue文件),却报错 cannot GET
- react+redux+antd图书管理系统学习
- OAuth2.0授权协议的一个简单解释
- 现实JS模板,可设置默认值
- Spring AOP 浅析
- 【易实战】Spring Cloud Greenwich Eureka:服务注册与发现
- Java实现极光推送
- 数美科技:全栈防御体系怎么样护航游戏ROI增长
- 卡内基梅隆大学计算机专业有哪些,卡内基梅隆大学计算机系统类大学排名最新资讯总结篇...
- 关于堡垒机的原理以及如何配置
- HTTP请求响应基础介绍
- 安卓虚拟键盘_安卓手机开启全局手势导航的方法,拯救老设备
- macOS程序坞介绍与使用技巧
- 重阳节[转自百度]---又到重阳节了
- SQL Server 是什么?
- 【C++】STL中 list 反向迭代器的模拟实现
- C语言使用函数交换两个数的值
热门文章
- Linux TCP/IP协议栈之Socket的实现分析
- MyEclipse攻略大全
- android三维地图,图吧导航(com.mapbar.android.mapbarmap) - 10.3.3.64c0967 - 应用 - 酷安
- python之subprocess.Popen常用案例
- 什么是“老婆”(看完我哭了)
- 05 高性能网络设计专栏-网络原理
- 低代码开发平台——体验系统的重要性
- PHP+MySQL设计高效发表评论留言功能
- 关于政府救楼市自己的一点天真的看法
- APP技巧:安卓原生跨屏协同终于来了,还能和 Windows「隔空投送」