CSS毛玻璃效果

V站笔记

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

[break]

比如我们需要将上图中页面中间的文字区域变成毛玻璃效果,首先想到的是给其设置一个透明度,并添加模糊滤镜:

.content {
    background-color: rgba(0,0,0,0.3);
    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);    
}

可是生成的效果却是下面这样:

从这个失败的例子我们得到两个结论:

  1. 对元素直接使用模糊会将其内容全部模糊掉,为了保证文字不会模糊掉需要多一个层单独应用模糊效果。
  2. 模糊效果并不会应用到其背后的元素上,所以需要使用 content 区域有和背景相同的背景图并进行模糊。

先解决第一个问题:

多一个层级的方法不通过添加元素,而通过伪元素。

.content {
    z-index: 1;
}
.content:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.8);
    z-index: -1;
}

这里有两点需要注意,由于伪元素不能通过width:100%height:100%来继承宿主元素的尺寸,所以通过上述方式来继承content的尺寸;为了使伪元素位于content的下面这里给其设置z-index:-1,为不使其隐藏到背景图的后面,这里给content设置z-index:1

效果:

接下来给content::after设置相同的背景图。

如上图,即使我们设置了相同的background-postionbackground-size,中间部分的图和大背景还是没有拼接成功。

解决这个问题的方法很简单,只需要添加background-attachment: fixed属性,之后为其进行模糊处理。

.content {
    background-position: center top;
    background-size: cover;
}
.content::after {
    background-image: url(xxx.jpg);
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -ms-filter: blur(20px);
    -o-filter: blur(20px);
    filter: blur(20px);
}

可以看到基本得到了我们想要的效果,美中不足的是在元素的边缘模糊的效果减弱了。为了解决这个问题,我们将伪元素的范围扩大一些,同时为了效果不超出content的范围,给其设置overflow:hidden属性。

.content {
  overflow: hidden;
}
.content::after {
  margin: -30px;
}

这样一个比较完美的毛玻璃效果就完成了,无论你如何改变浏览器窗口的尺寸,content部分的背景图都能很好的与背景拼接,这都归功于background-attachment属性。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

3 条评论
登录 后参与评论

相关文章

来自专栏Youngxj

让访客自动加自己为QQ好友代码

1424
来自专栏编程

在HTML中如何使用CSS?

一、前言 在 HTML 中使用 CSS,包括内联式、内嵌式、链接式和导入式。 二、分类 2.1 内联式 内联式是所有样式应用方式中最为直接的一种,它通过对 HT...

17710
来自专栏娱乐心理测试

IOS 上传到后台json数据

1383
来自专栏流柯技术学院

selenium截取具体元素图片(python版)

element = driver.find_element_by_id("xx")

571
来自专栏MelonTeam专栏

页面结构化在Android上的尝试

导语 :MVP开发模式可以帮助项目结构解耦,但其庞大的方法数增加,较为笨重设计对于手Q项目并不很适合。参考之前Web开发经验,提出以页面结构化的解耦方式组织代...

2026
来自专栏机器学习从入门到成神

image的srcset属性

介绍 响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下,imag...

691
来自专栏xingoo, 一个梦想做发明家的程序员

在Html中使用Requirejs进行模块化开发

在前端模块化的时候,不仅仅是js需要进行模块化管理,html有时候也需要模块化管理。这里就介绍下如何通过requirejs,实现html代码的模块化开发。 ...

19810
来自专栏web前端教室

对前端的假数据那有一些不太懂,为什么要这么搞?

如标题所示,为什么要搞那些假数据?不太明白。这是web前端零基础0827的一个同学的作业邮件里问我的。

1123
来自专栏黑白安全

CSS实现毛玻璃透明效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

633
来自专栏林德熙的博客

win10 uwp BadgeLogo 颜色

本文讲的是在上传应用商店出现BadgeLogo颜色问题,和如何解决,因为我是渣渣,本文可能带有一定的主观性和局限性,说的东西可能不对或者不符合每个人的预期。如果...

401

扫码关注云+社区