UI妹子说我用CSS实现毛玻璃效果的样子很帅
前言
UI小姐姐问我,能不能做出透明加模糊的背景,而我当然是二话不说就说可以。因为我觉得没有什么是css实现不了的。更何况我要在她面前展现得我很厉害的样子。
开发起来
果不其然,在我打开蓝湖后,发现属性都给我提供好了
于是我立即将这份代码ctr c,然后ctr v,一番丰功伟绩立马就完成了,效果也是杠杠滴。
然后兴高采烈地交付给UI小姐姐查看了。小姐姐也说可以。
出于职业素养,我马上拿起我在pdd上9.9买的iphone13手机(当时也就邀请了我老家整个镇子的人来帮我砍一刀吧)查看效果,哇塞真机效果不错啊
但是等到验收,UI小姐姐就告诉我安卓显示有问题。
然后我马上查看了一下backdrop-filter的兼容性。
果然,又是一个兼容性问题的属性。
只能放弃了,好可惜,本来用一个属性就能完成需求了。
好的,问题不大,印象中还有一个属性也可以实现模糊效果,叫filter来着,试试看怎么用它来实现吧。
建立一个html文件来模拟一下吧
<head><style>html,body {margin: 0;width: 100%;height: 100%;background: url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0);background-size: 100% 100%;overflow: hidden;}.card {margin: 100px auto;width: 300px;height: 300px;position: relative;border: 1px solid #000;color: white;}</style></head><body><div class="card">123123123123123123123123123123123123123123123123123123123123123123123123123123123123</div>
</body></html>
如图所示,现在是只有一个框框。
然后我,稍加修饰,用下fitler。
<html lang="en"><style>html,body {margin: 0;width: 100%;height: 100%;background: url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0);background-size: 100% 100%;overflow: hidden;}.card {margin: 100px auto;width: 300px;height: 300px;position: relative;border: 1px solid #000;color: white;filter: blur(10px);background-color: rgba(0,0,0,.3);}</style><body><div class="card">123123123123123123123123123123123123123123123123123123123123123123123123123123123123</div>
</body></html>
模糊了吗?确实模糊了。但是有毛玻璃效果吗?没有,毛都没有。我们看下 用backdrop-filter是什么效果的。
.card {margin: 100px auto;width: 300px;height: 300px;position: relative;border: 1px solid #000;color: white;backdrop-filter: blur(10px);background-color: rgba(0,0,0,.3);
}
看,这才是毛玻璃的效果好吧?为什么filter就不行了? google一下下。
果然,和我猜测的一样(马后炮)
那该怎么样才能模拟呢?
因为是对图片效果才能模糊,想到一个好方法,就是我们要是能取父盒子的背景图片的一块 做为背景就好了。
例如,在这里我们取索隆的半张脸作为card盒子的背景。
该怎么取?
这就有一个属性要登场啦。
background-attachment:fixed
背景图片相对于视口固定,就算元素有了滚动条,背景图也不随内容移动。
fixed用法如下:
<style>
body{background-image: url(img/cartooncat.png);background-position: bottom left;background-attachment: fixed;background-repeat: no-repeat;height: 1000px;
}
</style>
</head>
<body><h1>下拉看效果:</h1>
</body>
另一个作用是,它可以近似于取父元素背景图的某一块区域。
也就是我们上面所做的假设 就是我们要是能取父盒子的背景图片的一块 做为背景就好了
<html lang="en"><style>html,body {margin: 0;width: 100%;height: 100%;background: url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0);background-size: 100% 100%;overflow: hidden;}.card {margin: 200px auto;width: 300px;height: 300px;position: relative;border: 1px solid #000;color: white;backdrop-filter: blur(10px);background-color: rgba(0,0,0,.3);}.card::before {content: ' ';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 0;/* filter: blur(10px); */background: url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0) no-repeat center;/* background-attachment: fixed; */background-size: cover; margin: -20px;}</style><body><div class="card">123123123123123123123123123123123123123123123123123123123123123123123123123123123123</div>
</body></html>
看看没有使用background-attachment: fixed的情况
再看看使用的情况
.card::before {content: ' ';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 0;/* filter: blur(10px); */background: url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0) no-repeat center;background-attachment: fixed;background-size: cover; margin: -20px;}
可以看取到的差不多就是那块区域。
再看看模糊效果啦。
可以看到 毛玻璃还原度 已经很明显了,但是呢因为设计稿的背景原本是颜色的,现在换成了图片,我们需要换成颜色的话,就需要再添加一个伪元素来模拟颜色。
.card::after {content: ' ';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 0;background-color: rgba(0, 0, 0, 0.2);}
看,很完美了。
但是文字被覆盖了,所以我们需要提升文字的层级
<html lang="en"><style>html,body {margin: 0;width: 100%;height: 100%;background: url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0);background-size: 100% 100%;overflow: hidden;}.card {margin: 100px auto;width: 300px;height: 300px;position: relative;border: 1px solid #000;color: white;backdrop-filter: blur(10px);background-color: rgba(0,0,0,.3);}.text {position: relative;z-index: 1;}.card::before {content: ' ';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 0;filter: blur(10px);background: url(https://puui.qpic.cn/qqvideo_ori/0/x3311cyuqaf_496_280/0) no-repeat center;background-attachment: fixed;background-size: cover; margin: -20px;}.card::after {content: ' ';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 0;background-color: rgba(0, 0, 0, 0.2);}</style><body><div class="card"><div class="text">123123123123123123123123123123123123123123123123123123123123123123123123123123123123</div></div>
</body></html>
完美。
然后,我马上跟UI小姐姐说我做好了。验收通过,不知道UI小姐姐爱上我了没有。
UI妹子说我用CSS实现毛玻璃效果的样子很帅相关推荐
- 自学前端之CSS实现毛玻璃效果
我们知道,页面中有一种非常好看的效果就是毛玻璃,我们先看一下效果图 接下来我们就具体实现一下这个效果 先看HTML 在body中设置一张背景图片 然后设置一个div,用来作为卡片,也是我们需要的毛玻璃 ...
- 纯css实现毛玻璃效果
2019独角兽企业重金招聘Python工程师标准>>> 最近有用到毛玻璃效果,在此记录,一方面方便以后使用,另一方面也分享给其他朋友. 先上图: 通过对比,就可以看到效果还是很不错, ...
- css实现毛玻璃效果
首先我们要知道实现毛玻璃效果的关键点:filter滤镜 html代码 <div class="main"></div> 先写一个居中的div,并给body加 ...
- 一行CSS实现毛玻璃效果
想要iOS上的那种毛玻璃设计,在百度搜索的前几排回答,实现效果实在是太复杂,而且不完美. 不完美之处是,百度的回答是将after伪元素设置背景图片后在虚化,这样的话不是背景图片不就虚化不了了吗?? 还 ...
- css 实现毛玻璃效果
前言 最近在参加一个项目的时候,需要实现毛玻璃的效果,一开始想简单的使用背景透明度rgba或者filter:blur,来实现. 遇到问题: 1.只使用透明度不能准确的实现毛玻璃的效果. 2.如果单独的 ...
- CSS揭秘——毛玻璃效果
为了方便把CSS写在一起了:点击测试 例子 <!DOCTYPE html> <html lang="en"><head><meta cha ...
- 关于css实现毛玻璃效果
参考: https://www.cnblogs.com/ghost-xyx/p/5677168.html 人家的效果图: https://darylxyx.github.io/Demo/blur 如果 ...
- 【css】毛玻璃效果,背景高斯模糊
关键属性:backdrop-filter 参考了Apple 官网,参数与 Apple 官网一致 // 背景高斯模糊 @supports (-webkit-backdrop-filter: satura ...
- php毛玻璃,使用css怎么实现毛玻璃效果?
使用css怎么实现毛玻璃效果?下面本篇文章给大家介绍一下使用css实现毛玻璃效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 其实毛玻璃的模糊效果技术上比较简单,只是用到了 ...
最新文章
- 深入理解Webpack核心模块Tapable钩子[异步版]
- ajax得到session,Ajax如何使用Session
- 基于ChipSmith的逆向(反向)模拟IC设计流程
- Eclipse里代码自动完成 auto completion的快捷键设置
- mybatis generator 中文注释_mybatis代码生成器,提高开发效率
- 枚举命名规范_UE4 C++基础教程 - 编码规范
- 理解云原生--开发模型、架构原则、主要技术
- extjs2.0 ie8 下拉树_extjs2下拉树选项框comboxWithTree(支持异步加载子节点)
- 计算机桌面桌面设置动态视频,电脑壁纸 篇一:电脑设置动态视频桌面图文教程...
- 三星980 NVMe SSD推出:首款不含 DRAM 的消费类硬盘
- [渝粤题库]西北工业大学离散数学
- wincc mysql_Wincc操作数据库SQLSERVER
- PCB layout的基本原则
- Mac 显示隐藏文件夹
- 获取微信视频号视频地址
- 在Linux中,如何找回root密码(So easy!!)
- psd格式图片一键切图
- oracle中有没有distance,oracle_关于extended distance cluster rac的介绍
- Allegro模块布局和布局复用
- SQL更改表名,数据库名,字段名
热门文章
- 如何做好电商运营?倍赞网:这十个步骤必须懂
- 2022-2023级中国石油大学(北京)MBA提前面试已开启-文都管联院
- c语言中的原码反码补码,c语言中的原码 反码 补码
- C#treeview树形菜单
- 漏洞复现_CVE-2017-0144 “永恒之蓝”漏洞
- itchat 库学习(登录篇)
- c#调用打印机(针式打印机),实现打印
- SQL语法之AND OR 运算符
- 电商项目的并发量一般是多少_【高并发】高并发秒杀系统架构解密,不是所有的秒杀都是秒杀!...
- 免费医学ppt课件哪里找?新整理(免费/高性价比)医学课件ppt资源下载网站