CSS を使用して完全に互換性のあるすりガラス効果を実現するにはどうすればよいですか? (詳しいコード説明)

この記事では、CSS の backdrop-filter 属性を理解し、この属性の互換性を確認し、完全に互換性のあるすりガラス効果を実現する方法を紹介します。

この記事を通じて、

• 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);
    }
}

CodePen Demo --フィルターとバックアップフィルターの比較

アドレス: https://codepen.io/Chokcoco/pen/WNjebrr

#backdrop-filter

の前に、私は欲しかった背景に要素を追加するだけで上記のフィルター効果を実現することは依然として非常に困難であり、静的な画像の場合は問題ありませんが、背景がスクロール可能な動的な背景である場合、CSS は通常無力です。

backdrop-filter

は、要素自体に影響を与えることなく、要素の背後にあるコンテンツにフィルターを追加するために生まれました。すりガラス効果（すりガラス）を実現するのにとても便利です！

backdrop-filter 互換性

backdrop-filter

実は、これはかなり前から存在しています。 、Firefox はまだ対応していません。

IE を諦めた一部の PC 側のビジネスでは、Firefox との互換性が必要です。すりガラス効果を実現する アプリケーションを実装するには、Firefox の互換性の問題を解決する必要があります。

Firefox で曇りガラス効果を実現する

OK、この記事の焦点は、Firefox で backdrop-filter を可能な限り使用する方法です。曇りガラスの効果を復元します。

まずは見てみましょう backdrop-filter が通常に使用されている場合、または上記の例で次の効果​​がある場合、すりガラス効果はありません:

背景添付ファイルの使用: 静的な背景画像との互換性を修正しました

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;
    }
}

効果は次のとおりです:

このメソッドは、エラーが発生する前にも使用されます。

backdrop-filter

は、さまざまなブラウザで単純なすりガラス効果を実現するために最も一般的に使用される方法の 1 つです。

CodePen デモ -- 背景添付: 固定 | フィルター: bulr() を使用してすりガラス効果を実現します。アドレス: https://codepen.io/Chokcoco/pen/ XWRrVma

background-attachment の使用: 固定は静的背景画像の欠点と互換性があります

ただし、この方法には 2 つの欠点もあります:

1. 擬似要素は背景のレイヤーを重ねるために使用されますが、階層関係上、親要素の背景が一番下にあるため、要素自体の背景色が反映されておりません。

解決策は、別の疑似要素を介して背景色のレイヤーをオーバーレイすることです。この背景色は、最初は親要素自体に割り当てられる必要があります。

重ね合わ​​せ後の効果は次のとおりです。

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></image> 值。该图像值是实时的，这意味着如果被指定的 HTML 元素被更改，应用了该属性的元素的背景也会相应更改。

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

它有什么作用呢？

-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);
    }
}

它的效果大概是这样：

我们就假设这个结构就是我们页面某一块的内容，然后，我们就可以使用 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，并且能追踪实时变化：

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：

    
模拟真实 DOM
    
模拟真实 DOM
    
模拟真实 DOM
    
模拟真实 DOM
    
模拟真实 DOM
    
模拟真实 DOM
    
模拟真实 DOM
    
模拟真实 DOM
    
模拟真实 DOM

<div class="g-glossy">frosted glass effect </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 群中，风海流 同学提供的一种思路，非常的巧妙，并且，他自己也对这种方案进行了完整的阐述，你可以戳这里看看：在网页中实现标题栏「毛玻璃」效果，本文也是经过他的同意，重新整理发出。

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

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

原文地址：https://segmentfault.com/a/1190000040263452

作者：ChokCoco

更多编程相关知识，请访问：编程视频！！

以上がCSS を使用して完全に互換性のあるすりガラス効果を実現するにはどうすればよいですか? (詳しいコード説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。