如何用一行代码在CSS中使背景模糊

作者:丁晓峰  发布时间:2020-04-17 21:45:32

  背景模糊很酷。这是不争的事实。每个单个用户界面中至少应包含十个背景模糊(最好彼此堆叠),并且自创建没有背景模糊的万维网以来创建的每个界面都应标记为高优先级技术债务。这是事实。当您向他们展示具有背景模糊的设计证明时,开发人员会喜欢上它。这是错误的。

  那是因为背景模糊基本上是不可能在Web应用程序上实现的,这使设计人员像人一样感到沮丧,撒谎和完全无用。但这一切今天都改变了。好吧,它实际上在2018年发生了变化,或者我刚刚找到了MDN页面,但是您明白了。

  因此,以下是使用background-filter CSS属性创建背景模糊的方法。

如何用一行代码在CSS中使背景模糊

  背景过滤器:blur(5px);

  什么是背景滤镜

  根据MDN的说法,“ backdrop-filterCSS属性可让您将图形效果(例如模糊或颜色偏移)应用到元素后面的区域。因为它适用于元素后面的所有内容,所以要查看效果,您必须使元素或其背景至少部分透明。”

  他们基本上是说它在开发中的工作原理与选择的设计工具(Figma,Sketch,Adobe XD,Framer等)完全一样这将有助于本文的SEO)。

  无论模糊背后是什么,都变得模糊。

  让我们举一个简单的例子

  <div class="background"></div>

  首先创建一个类为的.background。然后在.background类中添加一些CSS 。我们将添加background-image使其覆盖整个页面。

  .background {

  background-image: url(http://www.dingxiaofeng.com/Q7PclNhVRI0);

  background-position: bottom;

  background-repeat: no-repeat;

  background-size: cover;

  height: 100vh;

  width: 100%;

  }

  现在让我们添加模糊效果。我们将以类.background轻轻地放置div.blur。

  <div class="background">

  <div class="blur"></div>

  </div>

  我们将使我们的.blur类覆盖整个窗口的高度,但仅覆盖一半的宽度,以便在应用滤镜之后可以看到差异。

  如果要让模糊具有颜色,则需要添加带有rgba值的background属性。确保Alpha(不透明度)小于1,以便我们可以透视颜色。

  然后,我们将添加神奇的backdrop-filterCSS属性并将其值设为blur(8px)。提示,提示……增加/减少px以增加/减少模糊。

  // Content we're putting a blur over

  .background {

  background-image: url(http://www.dingxiaofeng.com/Q7PclNhVRI0);

  background-position: bottom;

  background-repeat: no-repeat;

  background-size: cover;

  height: 100vh;

  width: 100%;

  }

  // Background Blur using backdrop-filter

  .blur {

  background: rgba(255, 255, 255, 0.2); // Make sure this color has an opacity of less than 1

  backdrop-filter: blur(8px); // This be the blur

  height: 100vh;

  width: 50%;

  }

  添加多个过滤器

  如果要向backdrop-filter一个元素添加多个属性,只需将它们用空格隔开。但是要小心;他们可能不会一起玩。是的,在我的第一篇中型文章中删除分号。这是怎么回事。

  // Content we're putting a blur over

  .background {

  background-image: url(http://www.dingxiaofeng.com/Q7PclNhVRI0);

  background-position: bottom;

  background-repeat: no-repeat;

  background-size: cover;

  height: 100vh;

  width: 100%;

  }

  // Background Blur using backdrop-filter

  .blur {

  background: rgba(255, 255, 255, 0.2); // Make sure this color has an opacity of less than 1

  backdrop-filter: blur(8px); // This be the blur

  height: 100vh;

  width: 50%;

  }

  // Multiple filters

  .multiple-filters {

  backdrop-filter: blur(20px) saturate(120%) contrast(200%);

  }

  显然,您可以通过此方法获得相当的创造力。它已经试验了一段时间,因此请确保检查浏览器的兼容性以及所有重要的内容。在撰写本文时,MDN表示除Internet Explorer,适用于Android的Firefox和Samsung Internet之外的所有主要浏览器都在使用它,因此请为它们编写一些备用。



转载请注明来自:http://www.dingxiaofeng.com/design/89.html

相关文章阅读

平面设计简介以及基本结构单位

如何使用设计思维来解决营销问题

如何模拟UX编写

如何制作良好的UI演示视频、视频录制

理想的设计工作流程

Top