css背景模糊⽤什么属性_如何⽤⼀⾏代码在css中使背景模糊css背景模糊⽤什么属性
重点 (Top highlight)
Background blurs are cool. This is an undisputed fact. Every single user interface should have at least ten background blurs in them (preferably stacked on top of each other), and every interface made since the creation of the world wide web without background blurs should be flagged as high priority technical debt. This is the Truth. Developers love when you show them design proofs with background blurs. This is false.
背景模糊很酷。 这是不争的事实。 每个单个⽤户界⾯中⾄少应包含⼗个背景模糊(最好彼此堆叠)，并且⾃创建⽆背景模糊的万维⽹以来创建的每个界⾯都应标记为⾼优先级技术债务。 这是事实。 当您向他们展⽰具有背景模糊的设计证明时，开发⼈员会喜欢它们。 这是错误的。
That’s because background blurs have been basically impossible to implement on web applications, making designers feel frustrated, lied to, and utterly useless as human beings. But that all changes today. Well, it actually changed in 2018 or something and I just found the MDN page, but you get the point.
这是因为背景模糊基本上是不可能在Web应⽤程序上实现的，这使设计⼈员像⼈⼀样感到沮丧，撒谎和完全⽆⽤。 但这⼀切今天都改变了。 好吧，它实际上在2018年有所变化，或者我刚刚到了MDN页⾯，但是您明⽩了。
So, here’s how to create a background blur using the backdrop-filter CSS property.
因此，以下是使⽤background-filter CSS属性创建背景模糊的⽅法。
backdrop-filter: blur(5px);
That’s it.
⽽已。
If you insist on reading the rest of the article, here’s a little more detail…
如果您坚持阅读本⽂的其余部分，这⾥有⼀些详细信息……
什么是背景滤镜？ (What is backdrop-filter?)
According to MDN, “The backdrop-filter CSS property lets you apply graphical effects such as blurrin
g or color shifting to the area behind an element. Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.”
根据MDN的说法，“ backdrop-filter CSS属性可让您将图形效果(例如模糊或颜⾊偏移)应⽤到元素后⾯的区域。 因为它适⽤于元素后⾯的所有内容，所以要查看效果，您必须使元素或其背景⾄少部分透明。”
In case you smashed your eyeballs into a pair of scissors halfway through the first sentence, they’re basically saying it works in dev exactly the same as it works in your design tool of choice (Figma, Sketch, Adobe XD, Framer, anything else that will help with SEO of this article).
万⼀您在第⼀句话中途⽤剪⼑把眼球砸烂了，他们基本上是说它的⼯作原理与选择的设计⼯具(Figma，Sketch，Adobe XD，Framer等)完全⼀样这将有助于本⽂的SEO)。
Whatever is behind the blur…get’s blurry.
⽆论模糊背后是什么，都变得模糊。
让我们做⼀个简单的例⼦ (Let’s make a simple example)
Start by creating a <div> with a class of .background.
⾸先创建具有.background类的<div> 。
<div class="background"></div>
Alright, let’s take a well deserved coffee and banana nut muffin break. Dust yourself off and then add some CSS to the .background class. We’ll add a lovely background-image of some pineapples and make it cover the whole page.
好吧，让我们喝点咖啡和⾹蕉坚果松饼吧。 ⾃⼰除尘，然后向.background类添加⼀些CSS。 我们将添加⼀些菠萝的可爱background-image ，并使其覆盖整个页⾯。
.background {
background-image: url(source.unsplash/Q7PclNhVRI0);
css怎么创建background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
width: 100%;
}
Now let’s add the blur. We’re going to quietly sneak inside that <div> with the class of .background and gently place a div with the class of .blur.
现在让我们添加模糊效果。 我们要悄悄潜⼊内部的<div>与类的.background和轻轻地放在⼀个div类的.blur 。
<div class="background">
<div class="blur"></div>
</div>
This is forty-fifth round Google interview type shit right here. Let’s finish changing hearts and minds.
这是第四⼗五轮Google采访类型。 让我们完成改变⼼意的事情。
We’ll make our .blur class cover the entire height of the window but only half of the width, so that we can see the difference after the filter is applied.
我们将使.blur类覆盖窗⼝的整个⾼度，但仅覆盖宽度的⼀半，以便在应⽤滤镜之后可以看到差异。
If you want the blur to have a color, you’ll need to add the background property with an rgba value. Make sure that the alpha (opacity) is less than 1, so we can see through the color.
如果要让模糊具有颜⾊，则需要添加带有rgba值的background属性。 确保Alpha(不透明度)⼩于1，以便我们可以透视颜⾊。
Then we’ll add the magical backdrop-filter CSS property and give it a value of blur(8px). Hint, hint…increase/decrease the px to increase/decrease the blur.
然后，我们将添加神奇的blur(8px)backdrop-filter CSS属性，并将其值设置为blur(8px) 。 提⽰，提⽰……增加/减少px以增加/减少模糊。
// Content we're putting a blur over
.background {
background-image: url(source.unsplash/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%;
}
You should now be staring directly at the pinnacle of human ingenuity and invention. Four pineapples with half of them blurred out. In all seriousness, it’s very cool.
您现在应该直接盯着⼈类的创造⼒和发明的顶峰。 四个菠萝中有⼀半模糊了。 说真的，这很酷。
添加多个过滤器 (Adding Multiple Filters)
If you want to add multiple backdrop-filter properties to an element, just separate them with spaces. Be careful though; they may not play nicely together. Yeah, dropping semicolons in my first Medium article. What's up.
如果要向⼀个元素添加多个backdrop-filter属性，只需将它们⽤空格分开。 不过要⼩⼼； 他们可能不会⼀起玩。 是的，在我的第⼀篇中型⽂章中删除分号。 这是怎么回事。
// Content we're putting a blur over
.background {
background-image: url(source.unsplash/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%);
}
Here is my Codepen example complete with pointless animation and a button to toggle the class containing multiple backdrop-filter properties:
这是我的Codepen⽰例，其中包含⽆意义的动画和⼀个按钮来切换包含多个backdrop-filter属性的类：
Clearly, you can get pretty inventive with this. It’s been experimental for a while, so make sure to check browser compatibility and all that important stuff. As of writing this, MDN says every major browser except for Internet Explorer, Firefox for Android, and Samsung Internet use it, so write some fallbacks for those.
显然，您可以通过此⽅法获得相当的创造⼒。 它已经试验了⼀段时间，因此请确保检查浏览器的兼容性以及所有重要的内容。 MDN表⽰，撰写本⽂时，除Internet Explorer，Android的Firefox和Samsung Internet以外的所有主要浏览器都在使⽤它，因此请为它们编写⼀些备⽤。
To the heroes who made this happen, I sincerely thank you. You’ve made our Dribbble shots have that much more of a chance of seeing the light of day.
对于实现这⼀⽬标的英雄们，我表⽰衷⼼的感谢。 您已经使我们的Dribbble镜头有更多机会看到⽇光。
Hope this basic rundown of using backdrop-filter to create a background blur helps at least one human. Please feel free to comment with any thoughts, suggestions, or vitriolic hate. I got myself a , , and you can follow me on in case I ever decide to do this again.
希望使⽤backdrop-filter创建背景模糊的基本过程可以帮助⾄少⼀个⼈。 请随时提出任何想法，建议或讨厌的评论。 我得到了⾃⼰的 ， ，如果我决定再次这样做，您可以在上关注我。
Thank you for reading. Have a beautiful time!
感谢您的阅读。 有⼀个美好的时光！
css背景模糊⽤什么属性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。