广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何利用CSS如何实现全兼容的毛玻璃效果
  • 352

0
分享到

如何利用CSS如何实现全兼容的毛玻璃效果

2024-04-02 19:04:59 352人浏览 独家记忆
摘要

这篇文章主要讲解了“如何利用CSS如何实现全兼容的毛玻璃效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何利用CSS如何实现全兼容的毛玻璃效果”吧！通过

这篇文章主要讲解了“如何利用CSS如何实现全兼容的毛玻璃效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何利用CSS如何实现全兼容的毛玻璃效果”吧！

通过本文，你能了解到

  • 最基本的使用 CSS backdrop-filter 实现磨砂玻璃(毛玻璃)的效果

  • 在至今不兼容 backdrop-filter 的 firefox 浏览器，如何利用一些技巧性的操作，巧妙的同样实现毛玻璃效果，让这个效果真正能运用在业务当中

什么是 backdrop-filter

backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。

backdrop-filter 与 filter 非常类似，可以取的值都是一样的，但是一个是作用于整个元素，一个是只作用于元素后面的区域。

backdrop-filter 与 filter 对比

我们使用 backdrop-filter 与 filter 同时实现一个毛玻璃效果作为对比，伪代码如下：

<div class="bg">
    <div>NORMal</div>
    <div class="g-filter">filter</div>
    <div class="g-backdrop-filter">backdrop-filter</div>
</div>
.bg {
    background: url(image.png);
    
    & > div {
        width: 300px;
        height: 200px;
        background: rgba(255, 255, 255, .7);
    }
    .g-filter {
        filter: blur(6px);
    }
    .g-backdrop-filter {
        backdrop-filter: blur(6px);
    }
}

如何利用CSS如何实现全兼容的毛玻璃效果

CodePen Demo -- filter 与 backdrop-filter 对比

地址：https://codepen.io/Chokcoco/pen/WNjebrr

在 backdrop-filter 之前，想实现上述的只给元素背景添加滤镜效果还是非常困难的，并且，对于静态画面还好，如果背景还是可以滚动的动态背景，通常 CSS 是无能为力的。

backdrop-filter 正是为了给元素后的内容添加滤镜而不影响元素本身而诞生的。使用它可以非常方便的实现磨砂玻璃效果（毛玻璃）！

backdrop-filter 的兼容性

backdrop-filter 其实已经诞生挺久了，然而，firefox 至今都不兼容它！

如何利用CSS如何实现全兼容的毛玻璃效果

对于部分已经放弃了 IE 的 PC 端业务而言，firefox 还是需要兼容的，想要让使用 backdrop-filter 实现毛玻璃效果应用落地，firefox 的兼容问题必须得解决。

在 firefox 中实现毛玻璃效果

OK，本文的重点就是在于如何在 firefox 中，不使用 backdrop-filter 而尽可能的还原毛玻璃的效果。

首先看一下，如果是正常使用  backdrop-filter，还是上述的例子效果如下，是没有毛玻璃效果的：

如何利用CSS如何实现全兼容的毛玻璃效果

使用 background-attachment: fixed 兼容静态背景图

如果在 firefox 上想使用毛玻璃效果。应用毛玻璃元素的背景只是一张静态背景图，其实方法是有很多的。

我们只需在元素的背后，叠加一张同样的图片，利用 background-attachment: fixed 将叠加在元素下面的图片定位到与背景相同的坐标，再使用 filter: blur() 对其进行模糊处理即可。

伪代码如下：

<div class="g-glossy">frosted glass effect </div>
$img: 'Https://static.pexels.com/photos/373934/pexels-photo-373934.jpeg';

body {
    height: 100vh;
    display: flex;
    background-image: url($img);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.g-glossy {
    position: relative;
    width: 600px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.5);
    overflow: hidden;
    z-index: 10;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: url($img);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover;
        filter: blur(10px);
        z-index: -1;
    }
}

效果如下：

如何利用CSS如何实现全兼容的毛玻璃效果

此方法也是在没有 backdrop-filter 之前，在各个浏览器想实现简单毛玻璃效果最常用的方法之一。

CodePen Demo -- 使用 background-attachment: fixed | filter: bulr() 实现毛玻璃效果

地址：https://codepen.io/Chokcoco/pen/XWRrVma

使用 background-attachment: fixed 兼容静态背景图的缺点

不过这种方法也有两个缺点：

1、由于使用了伪元素叠加了一层背景，因为层级关系，父元素的 background 是在最下层的，所以元素本身的背景色其实并没有被充分体现，可以对比下两种方法的实际效果图：

如何利用CSS如何实现全兼容的毛玻璃效果

解决方案是再通过另外一个伪元素再叠加一层背景色，这个背景色应该是原本赋值给父元素本身的。

叠加之后的效果如下：

如何利用CSS如何实现全兼容的毛玻璃效果

CodePen Demo -- 使用 background-attachment: fixed | filter: bulr() 实现毛玻璃效果优化

地址：https://codepen.io/Chokcoco/pen/abWbzKG

2、上述效果已经非常接近了，硬要挑刺的话，就是应用了模糊滤镜的伪元素的边缘有白边瑕疵，这一点其实是滤镜本身的问题，也非常好解决，我们只需要将伪元素的范围扩大一点即可：

.g-glossy {
    overflow: hidden;
    ....
    &::before {
        content: "";
        position: absolute;
        top: -100px;
        left: -100px;
        right: -100px;
        bottom: -100px;
    }
}

定位的代码由 top: 0px; 改为 top: -100px，四个方位都是如此即可。如此一来，就能做到基本上是百分百的模拟。

使用 moz-element() 配合 filter: blur() 实现复杂背景毛玻璃效果

下面这种方法就非常巧妙了，正常而言，运用毛玻璃效果的背景元素，都不是一张图片那么简单！背后通常都是整个页面复杂的结构，多层 DOM 的嵌套。

那么通过叠加一张简单的图片，就无法奏效了，我们得想办法模拟整个 DOM 元素。

而恰好，在 Firefox 中，有这么一个属性 -- -moz-element()。

何为 -moz-element()？MDN-element) 的解释是，CSS 函数 element() 定义了一个从任意的 html 元素中生成的图像 <image> 值。该图像值是实时的，这意味着如果被指定的 HTML 元素被更改，应用了该属性的元素的背景也会相应更改。

它其实是个草案规范，但是一直以来，只有 Firefox 支持它 -- CAN I USE -- CSS element()：

如何利用CSS如何实现全兼容的毛玻璃效果

它有什么作用呢？

-moz-element() 如何使用

那么 -moz-element() 如何使用呢？简而言之，它能够复制一个元素内部渲染出来的 UI，并且能够实时同步变化。

假设我们有这样一个简单的结构，元素背景和内容都在运动：

<div id="bg" class="g-normal">
    <p>Content</p>
</div>
.g-normal {
    margin: auto;
    width: 200px;
    height: 200px;
    animation: change 5s infinite;
    background: linear-gradient(deeppink, yellowgreen);
}

p {
    animation: move 5s infinite;
}

@keyframes change {
    0% {
        filter: hue-rotate(0);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

@keyframes move {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(150px, 150px);
    }
}

它的效果大概是这样：

如何利用CSS如何实现全兼容的毛玻璃效果

我们就假设这个结构就是我们页面某一块的内容，然后，我们就可以使用 background: -moz-element(#id) 这种方式，将这个元素内绘制的 UI 内容完全拷贝至另外一个元素，看看效果。

我们添加一个元素 <div class="g-element-copy"></div>，在这个元素内模拟 #bg 内的内容：

<div id="bg" class="g-normal">
    <p>Content</p>
</div>
<div class="g-element-copy"></div>
.g-element-copy {
    margin: auto;
    width: 200px;
    height: 200px;
    // 核心代码
    background: -moz-element(#bg);
}

它可以完全复制另外一个元素内绘制出来的 UI，并且能追踪实时变化：

如何利用CSS如何实现全兼容的毛玻璃效果

CodePen Demo -- -moz-element Demo(Firefox Only)

地址：https://codepen.io/Chokcoco/pen/jOmOPPL

在 firefox 中使用 element 复制 UI，用作毛玻璃元素背景

这样，有了上面的铺垫，下面的内容就比较好理解了。

和上述的 background-attachment: fixed 方案对比，我们还是通过伪元素叠加一层背景，只不过背景内的内容由单纯一张图片，变成了由 -moz-element() 复制的整段 UI 内容。

其次，上面的方案我们使用 background-attachment: fixed 使背景图和伪元素内叠加的图片的位置对齐，在这里，我们需要借助 javascript 进行简单的运算，确定背景内容元素的相关位置，计算对齐量。

来看这样一个 DEMO：

<div id="bg" class="bg">
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
    <div>模拟真实 DOM</div>
</div>
<div class="g-glossy">frosted glass effect </div>
<div class="g-glossy-firefox"></div>

其中，.g-glossy 是在正常情况下 backdrop-filter 兼容时，我们的毛玻璃元素，而 .g-glossy-firefox 则是不兼容 backdrop-filter 时，我们需要模拟整个 DOM 背景 UI时候的元素，可以通过 CSS 特性检测 CSS @support 进行控制：

核心 CSS 代码：

.bg {
    // 整个页面的 DOM 结构
}

.g-glossy {
    position: fixed;
    width: 600px;
    height: 300px;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}

.g-glossy-firefox {
    display: none;
}

@supports (background: -moz-element(#bg)) {
    .g-glossy-firefox {
        display: block;
        position: fixed;
        width: 600px;
        height: 300px;
        background: -moz-element(#bg) no-repeat;
        filter: blur(10px);
    }
}

简单解读一下：

  • 对于兼容 backdrop-filter 的，.g-glossy 内的代码将直接生效，并且 .g-glossy-firefox 不会展示

  • 对于 Firefox 浏览器，因为 backdrop-filter 必然不兼容，所以 .g-glossy 内的 backdrop-filter: blur(10px) 不会生效，而 @supports (background: -moz-element(#bg)) 内的样式会生效，此时 .g-glossy-firefox 将会利用 background: -moz-element(#bg) no-repeat; 模拟 id 为 bg 的元素

当然，这里我们需要借助一定的 JavaScript 代码，计算我们的模拟页面 UI 的元素 .g-glossy-firefox 相对它模拟的 #bg 元素，也就是页面布局的一个定位偏差：

$(function() {
        let blur = $('.g-glossy-firefox')[0].style;
        let offset = $('.g-glossy').eq(0).offset();

        function updateBlur() {
            blur.backgroundPosition = 
                `${-window.scrollX - offset.left}px ` + 
                `${-window.scrollY - offset.top}px`;
        }
        document.addEventListener('scroll', updateBlur, false), updateBlur();
});

OK，至此，我们就能完美的在 Firefox 上也实现毛玻璃的效果了：

如何利用CSS如何实现全兼容的毛玻璃效果

它相对于上面的第一种方案而言，最大的不同之处在于，它可以模拟各式各样的背景元素，背景元素可以不仅仅只是一张图片！它可以是各种复杂的结构！

这种方案是我的 CSS 群中，风海流 同学提供的一种思路，非常的巧妙，并且，他自己也对这种方案进行了完整的阐述，你可以戳这里看看：在网页中实现标题栏「毛玻璃」效果，本文也是经过他的同意，重新整理发出。

上述效果的完整代码，你可以戳这里：

CodePen Demo -- 兼容 Firefox 的复杂背景毛玻璃（磨砂玻璃）效果

https://codepen.io/Chokcoco/pen/ExWqaQG

总结一下

简单对上述内容进行一个总结：

  • 你可以使用 backdrop-filter 对兼容它的浏览器非常简单的实现毛玻璃（磨砂玻璃）效果

  • 对于不兼容 backdrop-filter 的浏览器，如果它只是简单背景，可以使用 background-attachment: fixed 配合 filter: blur() 进行模拟

  • 对于 firefox 浏览器，你还可以使用 moz-element() 配合 filter: blur() 实现复杂背景毛玻璃效果

  • 对于不兼容的上述 3 种效果的其他浏览器，设置了毛玻璃效果的元素，可以通过设置类似 background: rgba(255, 255, 255, 0.5) 的样式，使之回退到半透明效果，也算一种非常合理的降级效果，不会引起 Bug

感谢各位的阅读，以上就是“如何利用CSS如何实现全兼容的毛玻璃效果”的内容了，经过本文的学习后，相信大家对如何利用CSS如何实现全兼容的毛玻璃效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 如何利用CSS如何实现全兼容的毛玻璃效果

本文链接: https://www.lsjlt.com/news/75642.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 如何利用CSS如何实现全兼容的毛玻璃效果
    这篇文章主要讲解了“如何利用CSS如何实现全兼容的毛玻璃效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何利用CSS如何实现全兼容的毛玻璃效果”吧！通过...
    99+
    2022-10-19
  • CSS3如何实现毛玻璃效果
    这篇文章主要介绍“CSS3如何实现毛玻璃效果”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS3如何实现毛玻璃效果”文章能帮助大家解决问题。代码如下：body {  ...
    99+
    2023-07-05
  • 如何使用CSS实现毛玻璃特效
    这篇文章主要介绍“如何使用CSS实现毛玻璃特效”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何使用CSS实现毛玻璃特效”文章能帮助大家解决问题。一、backdrop-filter 是金手指吗？毛玻...
    99+
    2023-06-29
  • 如何使用纯CSS实现底层毛玻璃效果
    这篇“如何使用纯CSS实现底层毛玻璃效果”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“如何使用纯CSS实现底层毛玻璃效果”，小编整理了以下知识点，请大家跟着小...
    99+
    2022-10-19
  • 如何实现C++语言中的毛玻璃效果
    今天就跟大家聊聊有关如何实现C++语言中的毛玻璃效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。在基于Windows Vista的普通Windows应用程序及对话框程序中，如何利用...
    99+
    2023-06-17
  • 如何在Android中使用RenderScript实现一个毛玻璃模糊效果
    今天就跟大家聊聊有关如何在Android中使用RenderScript实现一个毛玻璃模糊效果，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。RenderScript 介绍在开始之前，先...
    99+
    2023-05-31
    android renderscript ers
  • 如何解决CSS3毛玻璃效果blur有白边的问题
    这篇文章给大家分享的是有关如何解决CSS3毛玻璃效果blur有白边的问题的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。做一个登录页，全屏背景图毛玻璃效果，实现方法如下：HTML：...
    99+
    2022-10-19
  • CSS3如何实现磨砂玻璃背景效果
    这篇文章主要为大家展示了“CSS3如何实现磨砂玻璃背景效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS3如何实现磨砂玻璃背景效果”这篇文章吧。效果图及实...
    99+
    2022-10-19
  • 如何使用html5 canvas实现图片玻璃碎片特效
    小编给大家分享一下如何使用html5 canvas实现图片玻璃碎片特效，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ ...
    99+
    2022-10-19
  • css如何实现返回顶部效果并兼容IE6
    小编给大家分享一下css如何实现返回顶部效果并兼容IE6，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ jquery+CSS实...
    99+
    2022-10-19
  • CSS如何实现透明效果并兼容主流浏览器
    小编给大家分享一下CSS如何实现透明效果并兼容主流浏览器，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！透明往往能产生不错的网页视...
    99+
    2022-10-19
  • 如何用CSS定义的PNG透明效果兼容各浏览器
    本篇内容主要讲解“如何用CSS定义的PNG透明效果兼容各浏览器”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“如何用CSS定义的PNG透明效果兼容各浏览器”吧!代...
    99+
    2022-10-19
  • jQuery如何实现可兼容IE6的淡入淡出效果
    这篇文章主要为大家展示了“jQuery如何实现可兼容IE6的淡入淡出效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jQuery如何实现可兼容IE6的淡入淡出...
    99+
    2022-10-19
  • css如何实现通用兼容性代码
    这篇文章给大家分享的是有关css如何实现通用兼容性代码的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 在css处开头加入 *{margin:0; pading:0; bo...
    99+
    2022-10-19
  • 如何利用CSS实现波浪进度条效果
    本篇内容介绍了“如何利用CSS实现波浪进度条效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！CSS Painting API再简单快速的过...
    99+
    2023-07-04
  • 如何利用纯css实现缩略图悬停效果
    小编给大家分享一下如何利用纯css实现缩略图悬停效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！缩略图悬停效果如下：源码：<!doctype html><html><head>...
    99+
    2023-06-08
  • 如何利用css实现一个抽奖动画效果
    这篇文章将为大家详细讲解有关如何利用css实现一个抽奖动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。首先我们先来看下最终的运行效果：从效果图我们可以看到，抽奖会自动进行，并显示中奖信息。这个效果基...
    99+
    2023-06-07
  • css中如何实现内容超出隐藏效果
    这篇文章将为大家详细讲解有关css中如何实现内容超出隐藏效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。css实现内容超出隐藏效果的方法是，给文本内容添加text-overflow属性，例如【text-...
    99+
    2023-06-15
  • CSS如何利用1像素空缺实现圆角效果
    这篇文章主要介绍了CSS如何利用1像素空缺实现圆角效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。代码如下:<!DOCTYPE HT...
    99+
    2022-10-19
  • 如何利用纯CSS实现旋转React图标的动画效果
    如何利用纯CSS实现旋转React图标的动画效果，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。几天前，小编在 codepen 看到一个剑气...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作