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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body {background: url("1.jpg") 0 / cover fixed;}

        main {

            position: absolute;

            overflow: hidden;

            top: 0; left: 0;

            bottom: 0; right: 0;

            width: 800px;height: 300px;

            margin: auto;

            line-height: 2;

            border-radius: 5px;

            box-shadow: 3px 3px 6px 3px rgba(0,0,0,.3);

        }

        main::after {

            position: absolute;

            content: '';

            top: 0; left: 0;

            bottom: 0; right: 0;

            z-index: -1;

            /* 方式一 */

            /*background-color: rgba(255,255,255,.3);*/

            /*backdrop-filter: blur(5px);*/

        }

        /* 方式二 */

        main { background: rgba(255,255,255,.2); }

        main::after {

            filter: blur(5px);

            background: url("1.jpg") 0 / cover fixed;

            /* 用于标题栏毛玻璃效果请使用具有透明的白色背景图 */

            /*background: url("50.svg") 0 / cover fixed;*/

        }

    </style>

</head>

<body>

    <main>

        <blockquote>

            "少年贪玩，青年迷恋爱情，壮年汲汲于成名成家，暮年自安于自欺欺人。

            人寿几何，顽铁能炼成的精金，能有多少？

            但不同程度的锻炼，必有不同程度的成绩；

            不同程度的纵欲放肆，必积下不同程度的顽劣。"

            <br />

            <br />

            "上苍不会让所有幸福集中到某个人身上，得到爱情未必拥有金钱；

            拥有金钱未必得到快乐；得到快乐未必拥有健康；

            拥有健康未必一切都会如愿以偿。

            保持知足常乐的心态才是淬炼心智、净化心灵的最佳途径。

            一切快乐的享受都属于精神，这种快乐把忍受变为享受，

            是精神对于物质的胜利，这便是人生哲学。"

            <footer>——

                <cite>杨绛</cite>

            </footer>

        </blockquote>

    </main>

</body>

</html>

												


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

    
						
  1. iOS开发探索-高斯模糊&毛玻璃效果
		
    iOS开发中有的时候需要将图片设置模糊,来实现特定的效果获取更好的用户体验, iOS7之后半透明模糊效果得到大范围使用的比较大,现在也可以看到很多应用局部用到了图片模糊效果,可以通过高斯模糊和毛玻璃效 ...
    
		
    2. 
						
  2. iOS  毛玻璃效果的实现方法
		
    iOS开发中有的时候需要将图片设置模糊,来实现特定的效果获取更好的用户体验, iOS7之后半透明模糊效果得到大范围使用的比较大,现在也可以看到很多应用局部用到了图片模糊效果,可以通过高斯模糊和毛玻璃效 ...
    
		
    3. 
						
  3. CSS 奇思妙想 | 全兼容的毛玻璃效果
		
    通过本文,你能了解到 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果 在至今不兼容 backdrop-filter 的 firefox 浏览器,如何利用一些技巧性的 ...
    
		
    4. 
						
  4. CSS3 之filter毛玻璃效果弹窗
		
    先看效果: 效果主要用css3的滤镜属性实现,代码如下: <!DOCTYPE html> <html lang="en"> <head> < ...
    
		
    5. 
								
  5. Backdrop Filter
		
    CSS 滤镜 : backdrop-filter backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果. 滤镜: 名称: 方法案例: 效果: blur() 模糊 filte ...
    
		
    6. 
						
  6. 使用CSS3制作导航条和毛玻璃效果
		
    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
    
		
    7. 
						
  7. 解决css3毛玻璃效果(blur)有白边问题
		
    做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: <body> <div class="login-wrap"> <div class= ...
    
		
    8. 
						
  8. css毛玻璃效果
		
    毛玻璃其实就是磨砂玻璃,能够模糊的看清背后的风景,让人感觉有种朦胧美,让界面看上去有些层次感. 比如: 高大上啊,接下来肯定是眼馋手痒的过程... 当然,用ps搞一个全景毛玻璃背景毫无疑问是最省事的, ...
    
		
    9. 
						
  9. CSS3中毛玻璃效果的使用方法
		
    今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. spring 事务实现方式有哪些？
			
    Spring提供了编程式事务和声明式事务两种实现方式, 编程式事务允许用户在代码中精确定义事务的边界, 而声明式事务(基于AOP)有助于用户将操作与事务规则进行解耦. 简单地说,编程式事务侵入到了业务 ...
    
			
    2. 
						
  2. 学习FastDfs（三）
			
    FASTDFS是什么 FastDFS是由国人余庆所开发,其项目地址:https://github.com/happyfish100 FastDFS是一个轻量级的开源分布式文件系统,主要解决了大容量的文 ...
    
			
    3. 
						
  3. 一道关于压缩包的ctf题目(包括暴力破解，明文攻击，伪加密)
			
    关于题目附件 链接:https://pan.baidu.com/s/1PRshlizSndkgxkslnqJrHA 提取码:p76e zip三连击 下载附件得到题目 手机号码一般是11位,那么我们设置 ...
    
			
    4. 
						
  4. 惯性传感器（IMU）
			
    近两年来,车联网.自动驾驶.无人驾驶.汽车智能化.网联化等成为了汽车行业的热点话题,未来汽车一定是朝着安全.可靠及舒适的方向发展.而这一切背后的发展都离不开传感器的作用,今天我们就来聊聊用途越来越广的 ...
    
			
    5. 
						
  5. vim的vimrc配置
			
    windows "# modified by Neoh set helplang=cn "使用中文帮助文档 set encoding=utf-8 "查看utf-8格式的帮 ...
    
			
    6. 
						
  6. 高速PCB设计名词解析
			
    1.吸芯效应 "芯吸效应"是超细纤维特有的性能,是指超细纤维中孔细,接近真空时,近水端纤维管口与水分子接触形成纤维中真空孔隙,此时大气压值超过纤维内部的真空,水就自然压积进入纤维孔 ...
    
			
    7. 
						
  7. 【uniapp 开发】智能温控开关 （环状图）
			
    index.vue <template> <view> <view class="qiun-columns"> <uCharts id=& ...
    
			
    8. 
						
  8. 大数据学习之路又之从小白到用sqoop导出数据
			
    写这篇文章的目的是总结自己学习大数据的经验,以为自己走了很多弯路,从迷茫到清晰,真的花费了很多时间,希望这篇文章能帮助到后面学习的人. 一.配置思路 安装linux虚拟机--->创建三台虚拟机- ...
    
			
    9. 
						
  9. java中抽象类和抽象方法到底什么关系?请举例说明！
			
    抽象类和抽象方法什么关系?抽象类中可能有抽象方法,也可能没有抽象方法.那位说,就跟没说一样,那抽象类和抽象方法都叫抽象,他们必定有关系,那关系是什么呢?如果一个类中有抽象方法,它必须得是抽象类. An ...
    
			
    10. 
						
  10. 预排序遍历算法（MPTT）
			
    预排序遍历算法(MPTT) 算法详细: 对于所有的树的节点,都会有一个左值和一个右值,用于确定该节点的边界. 父节点的左值都会比子节点左值的小,右值都会比子节点的右值大. 没有父节点新增:即没有父节点 ...
    
			
    11.