对于方式二采用的方式，如果存在边缘模糊程度不够，可以设置扩大伪元素范围（margin: -20px），父元素超出裁剪(overflow: hidden)。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {background: url("1.jpg") 0 / cover fixed;}
  8.         main {
  9.             position: absolute;
  10.             overflow: hidden;
  11.             top: 0; left: 0;
  12.             bottom: 0; right: 0;
  13.             width: 800px;height: 300px;
  14.             margin: auto;
  15.             line-height: 2;
  16.             border-radius: 5px;
  17.             box-shadow: 3px 3px 6px 3px rgba(0,0,0,.3);
  18.         }
  19.         main::after {
  20.             position: absolute;
  21.             content: '';
  22.             top: 0; left: 0;
  23.             bottom: 0; right: 0;
  24.             z-index: -1;
  25.             /* 方式一 */
  26.             /*background-color: rgba(255,255,255,.3);*/
  27.             /*backdrop-filter: blur(5px);*/
  28.         }
  29.         /* 方式二 */
  30.         main { background: rgba(255,255,255,.2); }
  31.         main::after {
  32.             filter: blur(5px);
  33.             background: url("1.jpg") 0 / cover fixed;
  34.             /* 用于标题栏毛玻璃效果请使用具有透明的白色背景图 */
  35.             /*background: url("50.svg") 0 / cover fixed;*/
  36.         }
  37.     </style>
  38. </head>
  39. <body>
  40.     <main>
  41.         <blockquote>
  42.             "少年贪玩，青年迷恋爱情，壮年汲汲于成名成家，暮年自安于自欺欺人。
  43.             人寿几何，顽铁能炼成的精金，能有多少？
  44.             但不同程度的锻炼，必有不同程度的成绩；
  45.             不同程度的纵欲放肆，必积下不同程度的顽劣。"
  46.             <br />
  47.             <br />
  48.             "上苍不会让所有幸福集中到某个人身上，得到爱情未必拥有金钱；
  49.             拥有金钱未必得到快乐；得到快乐未必拥有健康；
  50.             拥有健康未必一切都会如愿以偿。
  51.             保持知足常乐的心态才是淬炼心智、净化心灵的最佳途径。
  52.             一切快乐的享受都属于精神，这种快乐把忍受变为享受，
  53.             是精神对于物质的胜利，这便是人生哲学。"
  54.             <footer>——
  55.                 <cite>杨绛</cite>
  56.             </footer>
  57.         </blockquote>
  58.     </main>
  59. </body>
  60. </html>

  1.  

filter/backdrop-filter 毛玻璃效果的更多相关文章

  1. iOS开发探索-高斯模糊&毛玻璃效果

    iOS开发中有的时候需要将图片设置模糊,来实现特定的效果获取更好的用户体验, iOS7之后半透明模糊效果得到大范围使用的比较大,现在也可以看到很多应用局部用到了图片模糊效果,可以通过高斯模糊和毛玻璃效 ...

  2. iOS 毛玻璃效果的实现方法

    iOS开发中有的时候需要将图片设置模糊,来实现特定的效果获取更好的用户体验, iOS7之后半透明模糊效果得到大范围使用的比较大,现在也可以看到很多应用局部用到了图片模糊效果,可以通过高斯模糊和毛玻璃效 ...

  3. CSS 奇思妙想 | 全兼容的毛玻璃效果

    通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的 ...

  4. CSS3 之filter毛玻璃效果弹窗

    先看效果: 效果主要用css3的滤镜属性实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...

  5. Backdrop Filter

    CSS 滤镜 : backdrop-filter backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果. 滤镜: 名称: 方法案例: 效果: blur() 模糊 filte ...

  6. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  7. 解决css3毛玻璃效果(blur)有白边问题

    做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: <body> <div class="login-wrap"> <div class= ...

  8. css毛玻璃效果

    毛玻璃其实就是磨砂玻璃,能够模糊的看清背后的风景,让人感觉有种朦胧美,让界面看上去有些层次感. 比如: 高大上啊,接下来肯定是眼馋手痒的过程... 当然,用ps搞一个全景毛玻璃背景毫无疑问是最省事的, ...

  9. CSS3中毛玻璃效果的使用方法

    今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...

随机推荐

  1. Elasticsearch 在部署时，对 Linux 的设置有哪些优化方法 ？

    1.关闭缓存 swap; 2.堆内存设置为:Min(节点内存/2, 32GB); 3.设置最大文件句柄数: 4.线程池+队列大小根据业务需要做调整: 5.磁盘存储 raid 方式--存储有条件使用 R ...

  2. @Controller 注解?

    该注解表明该类扮演控制器的角色,Spring 不需要你继承任何其他控制器基类或 引用 Servlet API.

  3. WSGI是个啥?大白话告诉你wsgi做了什么!

    定义: 官方定义:wsgi是Web服务器网关接口(Python Web Server Gateway Interface,缩写为WSGI)是为Python语言定义的Web服务器和Web应用程序或框架之 ...

  4. npm run start 后台运行

    yum provides */nohup nohup npm start & 原程序的的标准输出被自动改向到当前目录下的nohup.out文件,起到了log的作用. 停止程序   ps -ef ...

  5. ACM - 最短路 - CodeForces 295B Greg and Graph

    CodeForces 295B Greg and Graph 题解 \(Floyd\) 算法是一种基于动态规划的算法,以此题为例介绍最短路算法中的 \(Floyd\) 算法. 我们考虑给定一个图,要找 ...

  6. Python - Python函数简介

  7. PID算法原理 一图看懂PID的三个参数

    找了好久这一篇算是很容易看懂的了  推荐给大家   写的十分清楚   原文作者DF创客社区virtualwiz LZ以前有个小小的理想,就是让手边的MCU自己"思考"起来,写出真正 ...

  8. Altium Designer 设置多层方法及各层介绍

    因为PCB板子的层分类有很多,所以通过帮助大家能更好地理解PCB的结构,所以把我所知道的跟大家分享一下 1.PCB各层简介 1. Top Layer顶层布线层(顶层的走线) 2. Bottom Lay ...

  9. CSS的inline、block与inline-block

    基本知识点 行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局. 块级元素(block):独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默 ...

  10. Python窗口学习之浅尝按键触发事件

    一.窗口上敲键盘触发事件(以Enter键为例) 二.点击窗口按钮触发事件(以鼠标左键双击为例) 代码: import tkinter as tk root = tk.Tk() root.geometr ...