backdrop-filters实现背景透明模糊效果代码

代码语言:html

所属分类:布局界面

代码描述:backdrop-filters实现背景透明模糊效果代码

代码标签: backdrop-filters 背景 透明 模糊

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        .notification {
          -webkit-backdrop-filter: blur(8px) saturate(180%);
          backdrop-filter: blur(8px) saturate(180%);
          background-color: rgba(255, 255, 255, 0.5);
        }
        

body{
    padding: 20px;
     background-color: #0e354b;
          background-image: url("//repo.bfw.wiki/bfwrepo/icon/6056bf753c238.jpg");
}
        
     
        
        main {
            width: 100%;
            height: 100%;
          

        
        }
        
        .design1,
         {
          font-size: 16px;
          height: 100%;
          display: grid;
          gap: 24px;
          justify-items: center;
          align-content: center;
          background-size: cover;
          background-position: center;
          position: relative;
        }
        

        
        .notification {
         
          border-radius: 12px;
      .........完整代码请登录后点击上方下载按钮下载查看

网友评论0