Css3实现背景毛玻璃效果

更新日期: 2020-03-15阅读: 2.4k标签: 效果

毛玻璃效果

ios里毛玻璃效果的使用非常多,本文介绍一个实现div毛玻璃背景的方法


css3 Filter

CSS3的Filter主要用在图像的特效处理上,默认值为none,还有以下备选项:

  1.grayscale灰度
  2.sepia褐色
  3.saturate饱和度
  4.hue-rotate色相旋转
  5.invert反色
  6.opacity透明度
  7.brightness亮度
  8.contrast对比度
  9.blur模糊
  10.drop-shadow阴影
每一种效果大家可以自己试试,考虑一下可以用在哪些方面,这里仅仅用到了其中的blur,帮助实现高斯模糊的效果。兼容性我试了一下最新的火狐和Chrome效果都是可以的,IE不用说了…


filter:blur()

参数默认是0,单位px,不接受%,参数值的大小表示屏幕上以多少像素融在一起, 所以值越大越模糊。


:before()

:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
用它来添加模糊背景,具体用法可以看我另外一篇?:before和:after


rgba()

毛玻璃背景上文字内容显示效果并不理想,无论字体颜色深或浅,看着总是怪怪的…因此还需要加上一层带色的半透明背景,一般是黑色,或白色。


示例:


整体通过三层重叠实现:

最下面是模糊层.blur_box:before,设置z-index: -2。
中间是rgba层.rgba,设置z-index: -1。
最上面是内容层.blur_box,设置z-index: 0。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>毛玻璃效果</title>
</head>
<style>
*{
  margin: 0;
  padding: 0;
}
.bg{
  background:url(1.jpg) no-repeat center center fixed;/* 与下面的blur_box:before中的background设置一样 */
  width:100%;
  height:100%;
}
.blur_box{
  z-index: 0;/* 为不影响内容显示必须为最高层 */
  position: relative;
  overflow: hidden;
}
.blur_box:before{
  content: "";/* 必须包括 */
  position: absolute;/* 固定模糊层位置 */
  width:300%;
  height:300%;
  left: -100%;/* 回调模糊层位置 */
  top: -100%;/* 回调模糊层位置 */
  background:url(1.jpg) no-repeat center center fixed;/* 与上面的bg中的background设置一样 */
  filter: blur(20px);/* 值越大越模糊 */
  z-index: -2;/* 模糊层在最下面 */
}
.rgba{
  background-color: rgba(0, 0, 0, 0.2);/* 为文字更好显示,将背景颜色加深 */
  position: absolute;/* 固定半透明色层位置 */
  width:100%;
  height:100%;
  z-index: -1;/* 中间是rgba半透明色层 */
}
.content_text{
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
  padding: 50px 30px;
  line-height: 28px;
}
article{
  width:40%;
  height:300px;
  margin:120px auto;
}
</style>
<body
  <div class="bg">
    <article class="blur_box">
      <div class="rgba"></div><!-- 写在这其实和blur_box:before效果相同,但已经设置过blur_box:before了 -->
      <div class="content_text">
        <h1>haha</h1>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
        <p>texttexttexttexttexttexttexttexttext</p>
      </div>
    </article>
  </div>
</body>
</html>

注释已经写的很详细了,但有一点还是得单独说一下。因为blur()产生的模糊效果当值越大时,就会有越宽的边缘渐变过渡,为了消除(实际上只是让它看不见),我将模糊层的宽度和高度都变大,再通过top和left负值调整位置。

.blur_box:before{
  content: "";
  position: absolute;
  width:300%;/* 模糊层的宽度和高度都变大 */
  height:300%;
  left: -100%;/* 回调模糊层位置 */
  top: -100%;
  background:url(1.jpg) no-repeat center center fixed; 
  filter: blur(20px);
  z-index: -2;
}

其中.rgba也可改为白色半透明background-color: rgba(255,255,255,0.2);,完全取决于自己,然后相应改变内容的字色。blur()的参数也可以根据自己爱好试着改变出想要的效果。

链接: https://fly63.com/article/detial/8225

使用 JavaScript 实现分屏视觉效果

今天这篇文章就来讲讲使用JavaScript来实现这种分屏的视觉UI效果。现在在网站上这种分屏视觉效果应用的也非常广泛,比如 Corsair website。

CSS3的过渡效果,使用transition实现鼠标移入/移出效果

在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬。以前如果要实现过渡,就需要借助第三方的js框架来实现。现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式平滑的切换到另一组样式。

js如何实现新手引导效果?

js最近有个小伙伴问到了怎么实现新手引导的效果,然后便去网上找了下实现方案。可以通过css的border来实现。

css3 斜切角/斜边的实现方式

设计图含有斜切角的效果时,我们一般想到的方法是切出四个角为背景,然后用border连起来,这样就能显示出该效果了,那么直接使用css呢?下面就整理css做斜边的效果。

JavaScript 实现打字机效果,跑马灯效果

这篇文章在不使用任何插件的情况,以最简洁的原生javascript来实现打字机效果和跑马灯效果。打字效果即把一段话一个字一个字的显示出来。

CSS遮罩效果(模糊效果,阴影效果,毛玻璃效果)

一般遮罩加上透明度opacity就是阴影效果。阴影效果和一般遮罩一样,唯一不同的是设置.mask遮罩的背景色用rgba()表示,当然hsla()也是可以的。模糊效果(毛玻璃效果) 通过 filter来实现

纯css实现气泡效果

主要运用的是1.border 组成的直角三角形。2,before 和 after 伪元素 。3,z-index属性;将元素的长宽设置为0,并且将border的3条边设置为透明的,就会出现border颜色的直角三角形

css文字选中效果

文字选中效果,这个可能很少有人注意过。在默认状态先一般选中的文本颜色是白字蓝底的,不过可以通过CSS进行设置。::selection定义元素上的伪选择器,以便在选定元素时设置其中文本的样式。

text-fill-color:仿苹果官网介绍效果 CSS设置文字渐变效果 文字背景图遮罩

发布iPhone XR的时候 各种心动 去官网看了一遍又一遍。闲着无聊发现 里面的介绍很用大篇幅的有背景文字来介绍。Like this:看着挺酷炫的还不错 就看了下实现方式。还挺简单的。

Vue 中多个元素、组件的过渡,及列表过渡

多元素之间如何实现过渡动画效果呢?这么写行不行呢?肯定是不行的,因为 Vue 在两个元素进行切换的时候,会尽量复用dom,就是因为这个原因,导致现在动画效果不会出现。如果不让 Vue 复用dom的话,应该怎么做呢?只需要给这两个div不同的key值就行了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!