css实现毛玻璃效果
发表于|更新于
|浏览量:
醉过才知酒浓，爱过才知情重。你不能做我的诗，正如我不能做你的梦。——胡适
从这里学过来的
Backdrop Filter Effect With CSS | CSS-Tricks
核心代码如下：
1 | .container { |
效果
进阶学习backdrop：
相关推荐
2023-06-18
CamanJS
过分宽大的法律，不易使人服从；太严厉的法律，则绝少被遵守。——富兰克林 分享一个前端基于canvas的图片js库 http://camanjs.com/ https://github.com/meltingice/CamanJS 安装 1npm install caman 用法： 1234567Caman('#my-image', function () { this.brightness(10); this.contrast(30); this.sepia(60); this.saturation(-30); this.render(); }); html 12345<img data-caman="brightness(10) contrast(30) sepia(60) saturation(-30)" data-caman-hidpi="/path/to/image@2x.jpg" src="path/to/image.jpg&q...
2025-05-21
升级项目为typescript
志不强者智不达。——《墨子·修身》 在一个 JavaScript + Vue 项目中引入 TypeScript 编写的代码组件 1. 保证依赖支持 TypeScript 安装 TypeScript 相关依赖（如果还没有）： 12npm install --save-dev typescriptnpm install --save-dev @types/node 如果你的 Vue 版本是 Vue 2，建议也装上 vue-property-decorator 和 vue-class-component（class 风格）： 1npm install --save vue-class-component vue-property-decorator 2. 配置 tsconfig.json 在项目根目录新建或完善 tsconfig.json，确保包括你的 TypeScript 组件目录。例如： 123456789101112131415161718192021222324252627{ "compilerOptions": { &q...
2025-05-20
Minecraft颜色选择转换
天行健，君子以自强不息。——《周易·乾·象》 https://codepen.io/0biwan/pen/ggVemP html 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071<div class="container"> <div class="tools"> <div class="colors"> <button data-color="0" class="bg-1">&0</button> <button data-color="1" class="bg-2">&1</button> &...
2023-04-14
js文件名排序
处人不可任己意，要悉人之情；处事不可任己见，要悉事之理。——吕坤 分享一个今天写的简单的文件名排序 12345678910111213141516171819202122232425262728293031323334353637383940function fileNameCompare(a, b) { if (a == null || b == null) return 0; let na = a.split(/[-_.—, (]/) let nb = b.split(/[-_.—, (]/) let maxLoop = Math.max(na.length, nb.length) for (let i = 0; i < maxLoop; i++) { if (!isNaN(Number(na[i])) && !isNaN(Number(nb[i]))) { let num = Number(na[i]) - Number(nb[i]) ...
2020-06-05
前端传递参数后端接收不到的坑
前两天跟小伙伴一起做项目的时候遇到一个问题 我们前端同志传递过来的参数无论如何也接收不到，debug发现根本没有传进来，而前端明明传了 后来在哥们儿的帮助下发现原来是参数名的问题…. 用的是代码生成器，生成的javabean的属性名是这样的uname 而生成的getter/setter方法名是这样的… 123456789101112131415161718/** * 获取活动名称 * * @return 活动名称 */public String getEName() { return this.eName;}/** * 设置活动名称 * * @param eName * 活动名称 */public void setEName(String eName) { this.eName = eName;} 直接导致参数接收不到 解决办法是用 12345@PostMapping("/event/add")public AjaxJson addEvent(@RequestBody Map...
2021-06-20
vue页面加载完毕之后执行
好奇心造就科学家和诗人。——法朗士 当vue页面加载完成后触发 我们在html开发中经常是使用window.onload实现 123window.onload = () => { } 但在vue中我们使用this.$nextTick 123this.$nextTick(() => { console.log("页面加载完啦~")}) 效果如下