仅用两个 CSS 属性打造绝妙的玻璃效果

2024-01-20 09:34:06

玻璃效果是一种流行的设计趋势，它可以为网站和应用程序增添现代感和优雅感。虽然可以使用多种技术创建玻璃效果，但本文将重点介绍一种使用仅两个 CSS 属性即可实现的简单方法：背景模糊和混合模式。

背景模糊

背景模糊是一种 CSS 属性，允许您将元素后面的背景模糊掉。这可以创建一种景深感，使元素从背景中脱颖而出。在我们的例子中，我们将使用 backdrop-filter 属性来模糊容器后面的背景。

.glass-container {
  backdrop-filter: blur(10px);
}

blur() 函数接受一个参数，以像素为单位指定模糊半径。值越大，模糊程度越大。

混合模式

混合模式是一种 CSS 属性，允许您控制元素与其背景之间的交互方式。在我们的例子中，我们将使用 mix-blend-mode 属性将容器的内容与模糊背景混合在一起。

.glass-container {
  mix-blend-mode: overlay;
}

overlay 混合模式将元素的内容叠加在其背景之上，创建一种类似于玻璃效果的半透明效果。

实践应用

现在我们已经了解了背景模糊和混合模式的工作原理，让我们将它们结合起来创建玻璃效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  
  <style>
    .glass-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: #fff;
      backdrop-filter: blur(10px);
      mix-blend-mode: overlay;
    }
  </style>
</head>
<body>
  <div class="glass-container">
    <h1>玻璃效果</h1>
    <p>使用仅两个 CSS 属性创建的玻璃效果。</p>
  </div>
</body>
</html>