在CSS中创建蒙砂玻璃效果的两种方法

最新推荐文章于 2024-04-29 04:19:57 发布

daique1908

最新推荐文章于 2024-04-29 04:19:57 发布

阅读量881

点赞数

文章标签： css java html python js ViewUI

在本教程中，我将向您展示如何在CSS中创建磨砂玻璃效果。您将在MacOS和iOS等UI中，甚至在当今的Windows中，都已经看到了这种效果，因此这绝对是一种趋势。我们可以使用CSS在网站上模拟毛玻璃，在本教程中，我将向您展示两种实现方法。

第一种方法具有相当广泛的浏览器支持，但是比我们将要讨论的第二种方法需要更多CSS。

首先创建一个带有.container类的.container 。我们将使用它来表示磨砂玻璃面板。然后，将背景图像应用于body元素。在此背景下，您需要应用：

body {
    background-attachment: fixed;
}

我们这样做是因为身体的孩子将继承此背景图像，并且我们希望将其保持相同的大小。

现在，我们将在.container上创建一个伪元素，这.container我们更加模糊。因此，我们应用以下内容：

.container:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

这给了我们一个覆盖容器元素的元素。现在是时候添加一些颜色了，我们将使用盒子阴影来完成：

.container:before {
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
}

为了给我们带来磨砂效果，我们添加了一个模糊滤镜：

.container:before {
    box-shadow: inset 0 0 2000px rgba(255, 255, 255, .5);
    filter: blur(10px);
}

这为我们提供了我们想要的大部分功能，但还远远不够。现在，我们需要（如前所述）为伪元素及其父元素设置继承的背景。

.container {
    background: inherit;
}

.container:before {
    background: inherit;
}

经过一些可选的调整，最终结果是：

现在是一种替代方法，该方法使用较少的样式，但对浏览器的支持略少。我们从相同的.container元素开始，并将相同的封面背景图像应用于body元素。

然后，我们将注意力转向一个称为backdrop-filterCSS属性。我们首先向.container添加一些显示样式，包括我们喜欢的背景颜色（让我们选择浅白色）：

.container {
 background-color: rgba(255, 255, 255, .15);   
}

然后，我们添加过滤器（您可能需要包含适当的前缀，您的浏览器，或只检查autoprefixer如果你Codepen是）。

.container {
 background-color: rgba(255, 255, 255, .15);  
 backdrop-filter: blur(5px);
}

而已！尝试使用模糊值来获得所需的效果，但是不需要其他操作。这就是给你的东西：

使用第二种方法的缺点是浏览器支持差。现在，您可以期望在Edge和Safari中获得支持，仅此而已。尽管如此，这种磨砂玻璃效果仍是增强支持该功能的浏览器用户界面的一种非常好的方法。

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-create-a-frosted-glass-effect-in-css--cms-32535

关注