使用backdrop-filter实现毛玻璃效果

1.css代码

 //居中position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);width:90%;padding-top:20px;//毛玻璃效果background: rgba(255,255,255,.3);border-radius: 10px;box-shadow:5px 5px 20px 5px rgba(0,0,0,.3);backdrop-filter:blur(10px);

2.效果图

3.完整代码

<template><div class="container"><div class="loginBar" ><van-form @submit="onSubmit(user) " ><van-cell-group inset><van-fieldv-model="user.username"name="用户名"label="用户名"placeholder="用户名":rules="[{ required: true, message: '请填写用户名' }]"/><van-fieldv-model="user.password"type="password"name="密码"label="密码"placeholder="密码":rules="[{ required: true, message: '请填写密码' }]"/></van-cell-group><div style="margin: 16px;"><van-button round block type="primary" native-type="submit">提交</van-button></div>
</van-form></div></div>
</template><script setup>
import useLocalLogin from '@/hooks/useLocalLogin.js'
import { reactive } from '@vue/reactivity'
const { handleLocalLogin } = useLocalLogin()
// import {reactive} from 'vue'
const  user=reactive({username: "test",password:"test"})function  onSubmit(user){handleLocalLogin(user)}
</script>
<style scoped lang="scss">
.container {// background: rgb(243 243 243);background:url("../assets/1.jpg");width:100vw;height:100vh;
}
.loginBar{//居中position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);width:90%;padding-top:20px;//毛玻璃效果background: rgba(255,255,255,.3);border-radius: 10px;box-shadow:5px 5px 20px 5px rgba(0,0,0,.3);backdrop-filter:blur(10px);}
</style>

使用backdrop-filter实现毛玻璃效果相关推荐

css filter blur 白边,解决css3毛玻璃效果(blur)有白边问题
做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: var w = window.innerWidth || document.documentElement.clientWidth || ...
css filter blur 白边,如何解决CSS3毛玻璃效果blur有白边的问题
如何解决CSS3毛玻璃效果blur有白边的问题发布时间:2021-06-29 11:59:54 来源:亿速云阅读:81 作者:小新这篇文章给大家分享的是有关如何解决CSS3毛玻璃效果blur有白 ...
CSS技巧收集——毛玻璃效果（深入理解滤镜filter）
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 原文链接 ...
filter:blur() 实现毛玻璃效果
使用玻璃效果比普通效果中的文字更易阅读,而且整体美观.在过去,我们通常把文本框区域的背景做模糊处理,随后使用一整张背景.不仅消耗性能,而且在HTML方面难以修改维护. 我们用filter:blur() ...
微信小程序开发：实现高斯模糊效果（毛玻璃效果）
前言在微信小程序开发的时候,也会遇到一些和在前端开发一样的样式需求,二者的相通类似性非常的高,就拿样式相关的需求来说,可以说是一模一样的操作.那么本文就来分享一个关于实现高斯模糊效果的需求,微信小程 ...
微信小程序开发：实现毛玻璃效果
前言在微信小程序开发的时候,也会遇到一些和在前端开发一样的样式需求,二者的相通类似性非常的高,就拿样式相关的需求来说,可以说是一模一样的操作.那么本文就来分享一个关于实现高斯模糊效果的需求,微信小程 ...
css毛玻璃效果白边_CSS3毛玻璃效果(blur)有白边问题的解决方法
做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: var w = window.innerWidth || document.documentElement.clientWidth || ...
纯css实现毛玻璃效果
2019独角兽企业重金招聘Python工程师标准>>> 最近有用到毛玻璃效果,在此记录,一方面方便以后使用,另一方面也分享给其他朋友. 先上图: 通过对比,就可以看到效果还是很不错, ...
iOS 毛玻璃效果的实现方法
iOS开发中有的时候需要将图片设置模糊,来实现特定的效果获取更好的用户体验, iOS7之后半透明模糊效果得到大范围使用的比较大,现在也可以看到很多应用局部用到了图片模糊效果,可以通过高斯模糊和毛玻璃效 ...
css毛玻璃效果白边_css3毛玻璃效果白边问题
注:css3毛玻璃效果应该很多人都知道怎么实现,但是有个问题是图片模糊了之后相当于缩小了,所以颜色深的图片会出现白边,这里说下我参考网上的解决方式吧! 1.毛玻璃实现方法: CSS3 blur滤镜实现 ...

使用backdrop-filter实现毛玻璃效果

1.css代码

2.效果图

3.完整代码

使用backdrop-filter实现毛玻璃效果相关推荐

最新文章

热门文章