- 2024-09-23css使用上中下三种图设置背景图，上下两张高度位置固定，中间拉伸(background-size、background-position、backdrop-filter)
注意：此处计算需要使用calc，less的减法是在编译阶段不满足此处需求上下两张图高度为5px，位置紧贴上下边缘，中间背景图根据高度拉伸，并且增加模糊度background:url('./images/top.png')no-repeat,/*顶部图片*/url('./images/bottom.png')no-repeat,/*底部图片*/u
- 2024-03-20css设置背景模糊周边有白色光晕，如何解决？
<divclass="img-box"><img:src="xxx.png"><divclass="img-bg":style="{'background-image':`url(`+xxx.png+`)`}"></div></div>.img-box{width:1
- 2024-03-14Boostrap5通过JS控制Offcanvas的显示隐藏
涉及的技术栈vue3vitebootstrap5背景在用bootstrap5的时候遇到一个问题，就是offcanvas在nav上的时候居然会有两个背景BackDrop，关闭之后页面上还有一个backdrop留在那bootstrap5文档里面提供了几个Method可以控制Offcanvas实例的显示隐藏，但是不会用复现问题点击offcan
- 2024-02-08基本微积分公式
微分的思想：变化率的研究：微分学关注于函数在某一点处的变化率。通过计算导数，我们可以了解函数在该点的斜率，即函数图像在该点的切线的斜率。这使得我们能够揭示函数在该点附近的局部行为，包括凹凸性、最值、拐点等。极限的概念：微分的定义涉及到极限的概念。当我们讨论函数在无限
- 2024-02-08[CSS] 渐进增强与优雅降级
渐进增强和优雅降级含义渐进增强：先针对低级浏览器保证基本功能，再针对高级浏览器追加功能；优雅降级：针对那些最高级、最完善的浏览器来设计网站，一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。@supports使用@supports可以查询相关的声明是否能被浏览器支持，然后后续可
- 2024-02-08[CSS] 渐进增强与优雅降级
渐进增强和优雅降级含义渐进增强：先针对低级浏览器保证基本功能，再针对高级浏览器追加功能；优雅降级：针对那些最高级、最完善的浏览器来设计网站，一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。@supports使用@supports可以查询相关的声明是否能被浏览器支持，然后后续可
- 2024-02-08[CSS] 渐进增强与优雅降级
渐进增强和优雅降级含义渐进增强：先针对低级浏览器保证基本功能，再针对高级浏览器追加功能；优雅降级：针对那些最高级、最完善的浏览器来设计网站，一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。@supports使用@supports可以查询相关的声明是否能被浏览器支持，然后后续可
- 2023-12-20backdrop-filter：为元素后面区域添加图形效果
backdrop-filter：为元素后面区域添加图形效果该属性可以让你为一个元素后面区域（即背景区域）添加图形效果（如模糊或颜色偏移）。它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。作用于元素背后的区域所覆盖的所有元素与filter的区别：filter作用于元素本身，ba
- 2023-11-16css_使用backdrop-filter实现磨玻璃效果
<divid="container"><divid="mask"></div></div>#container{width:500px;height:300px;position:relative;border:1pxsolid#ccc;background-image:url('http://thetest.com/vokax3ygw
- 2023-11-10CSS：backdrop-filter实现磨砂玻璃(毛玻璃)的效果
一、什么是backdrop-filterbackdrop-filterCSS属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。backdrop-filter与filter非常类似，可以取的值都是一样的，但是一个是作用于整个元素，一
- 2023-06-26css属性中的 filter 和 backdrop-filter 使用
filterCSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。mdn文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter/*URLtoSVGfilter*/filter:url("filters.svg#filter-id");/*<filter-function>values
- 2023-03-17Tailwind CSS 备忘清单_开发速查表分享
TailwindCSS备忘清单TailwindCSS是一个功能类优先的CSS框架，它集成了诸如flex,pt-4,text-center和rotate-90这样的的类，它们能直接在脚本标记语言中组合起来，构
- 2023-03-03CSS ::backdrop All In One
CSS::backdropAllInOnedialog/*Backdropisonlydisplayedwhendialogisopenedwithdialog.showModal()*/dialog::backdrop{background:rgba(255,0,0
- 2023-02-19CSS背景过滤器-毛玻璃属性(backdrop-filter)
例如做一个边框特效@keyframeshuerotate{0%{filter:hue-rotate(0deg);}100%{filter:hue-rorate(360deg);}}.border{border-bottom:1p
- 2023-02-11react笔记之学习之使用portal修改项目
前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从
- 2022-12-25site-by-gray
title:网站置灰description:filterbackdrop-filtermix-blend-modetags:-cssdate:2022-12-0715:15目录filterbackdrop-filter混合模式filter目标元素本身
- 2022-12-22❤比较两种模糊特效❤filter: blur(10px)和backdrop-filter: blur(10px)的区别
请先忽略背景图，遮罩位置是随便放的，我们主要关注下面的代码↓<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=
- 2022-12-21[css] 毛玻璃 backdrop-filter: blur
backdrop-filter:blur(10px)CSS毛玻璃效果的实现与应用
- 2022-12-05除了 filter 还有什么置灰网站的方式？
大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样：当然，通常而言，全站置灰是非常简单的事情，大部分前端同学都知道，仅仅需要使用一行CSS，就能实现全站置灰的方
- 2022-12-02除了 filter 还有什么置灰网站的方式？
除了filter还有什么置灰网站的方式？ 大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样：当然，通常而言，全站置灰是非常简单的事情，大部分前端同学都
- 2022-12-02除了 filter 还有什么置灰网站的方式？
大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样：当然，通常而言，全站置灰是非常简单的事情，大部分前端同学都知道，仅仅需要使用一行CSS，就能实现全站置灰
- 2022-10-29react实战笔记89:完成backdrop
- 2022-09-04使用CSS3快速实现毛玻璃效果
使用CSS3实现毛玻璃效果并没有想象中那么难，我们只需要了解一个属性：backdrop-filter:blur(5px);在使用该属性之前我们先要区分backdrop-filter与filter的区别。filter