如何在文本上使用 css 背景过滤器? [英] How to use css backdrop-filter on text?
问题描述
我正在尝试从 Apples Aracde 网站重现这种效果:方法 2 - 带阴影:
I'm trying to recreate this effect from Apples Aracde site: https://www.apple.com/apple-arcade/ Look at the "Play Extraordinary" text, it's got a backdrop filter applied and blurs the video behind it.
I can see they are using an SVG as an mask to clip the background, but I can't seem to do the same, the text comes out stretched or upside down.
Could anyone show me how to use text as an SVG mask to cut out the div/element with a backdrop filter on it?
Screenshot of the item in question: https://i.imgur.com/WHzO8Yj.png
As far as I know there's no way to directly apply the backdrop-filter:blur to a text element.
What we can do is:
First solution: the slowest one
1. Create a container
2. Apply a background to it (or to its ::before pseudo-element)
3. Use the filter:blur so that the container's background is blurred
4. Apply a svg mask onto the svg element and then apply the same background to the container (or to its ::before pseudo-element)
This way we have the blurried background on top that gets masked and the non-blurry version under it.
NOTE: applying the background to the container's ::before pseudo element will allow you to modify the background without touching the svg mask (usefull if you need to flip the background to create more contrast but you can't modify the original image).
Second solution: the fastest one
1. Create a container
2. Apply a background to the container
3. Apply the backdrop-filter:blur to the svg element
4. Apply the svg-mask to the svg element
This way we have the effect we would have if the backdrop-filter: blur could be applied to text.
Note that this is by far the fastest of the 3 methods in terms of performance.
Third solution: the most compatible one
(requires to have 2 copies of the background, one of which already blurred)
1. Create a container
2. Apply a background to the container
3. Apply the blurry version of the background to the svg element
4. Apply the svg-mask to the svg element
Applying the blur effect alone though, will result in text with a low contrast-ratio which is hard to read. To counter this I applied a shadow to the svg.
And this is how it's done:
<svg>
<defs>
<filter id = "trans-shadow">
<feGaussianBlur stdDeviation = "5"/>
<feComposite operator = "out" in2 = "SourceGraphic"/>
</filter>
</defs>
<image filter = "url(#trans-shadow)" x = "0" y = "0" width = "100%" height = "100%" xlink:href = "./SVG.svg" />
</svg>
Here you have a live demo: https://cristiandavideconte.github.io/applyBackdropFilterBlurToText/
Here you have the source code: https://github.com/CristianDavideConte/applyBackdropFilterBlurToText
I'll leave you a code snippet which contains the first 2 solutions (one is commented) so you can choose which one fits you better:
<html>
<head>
<style>
html,body {
margin: 0;
/* UNCOMMENT THIS PART TO TRY OUT THE NON-REVERSED VERSION
background: url(https://wallpaperhd.wiki/wp-content/uploads/wallpapers-1920x1080-5ae1cd66635d3.jpg) 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
*/
}
/* DELETE THE ::before TO TRY OUT THE NON-REVERSED VERSION */
.container::before {
content: "";
z-index: -1;
position: absolute;
width: 100vw;
height: 200vh;
background: url(https://wallpaperhd.wiki/wp-content/uploads/wallpapers-1920x1080-5ae1cd66635d3.jpg) 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
transform: rotateY(180deg);
}
.container {
width: 100vw;
height: 200vh;
display: flex;
align-items: center;
}
.svg {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
/* DELETE THIS 4 LINES TO TRY OUT THE NON-REVERSED VERSION */
filter: blur(20px) saturate(180%);
background: url(https://wallpaperhd.wiki/wp-content/uploads/wallpapers-1920x1080-5ae1cd66635d3.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
/* UNCOMMENT THIS PART TO TRY OUT THE NON-REVERSED VERSION
backdrop-filter: blur(20px) saturate(180%);
*/
/* Chrome, Safari and all webkit browsers */
-webkit-mask-image: url(./SVG.svg);
-webkit-mask-size: contain;
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-border: url(./SVG.svg) 25;
/* FIREFOX */
mask-image: url(./SVG.svg);
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
mask-border: url(./SVG.svg) 25;
}
</style>
</head>
<body>
<section class = "container">
<div class = "svg"></div>
</section>
</body>
</html>
In order for this snippet to work you need the svg mask to be called SVG.svg and it has to be placed in the same folder as your html file.
And remember you cannot access an svg file for your mask's url from local storage, you need a server (node.js is fine).
Here you have 2 screenshots of the possible outcomes:
Method 3 - no shadows:
Method 2 - with shadows:
这篇关于如何在文本上使用 css 背景过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
