entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://css-tricks.com/almanac/properties/f/filter/|blocks|key|3ubco|text|您可以尝试向背景图像添加不同的滤镜：|unstyled|depth|inlineStyleRanges|entityRanges|4mou|offset|length|2297a|这方面的缺点是，它只适用于图像。|58md8|基本上，有10个用于CSS的内置过滤器filter属性：|style|CODE|afb49|模糊(Px)|unordered-list-item|eldr1|亮度(%25)|5mnc8|对比度(%25)|5426k|投影(h阴影v阴影模糊扩散颜色)|csvbd|灰度(%25)|336pt|色调-旋转(度)|1397j|反转(%25)|h0|不透明度(%25)|b5v3e|饱和度(%25)|2plg6|深褐色(%25)|8gu9j|此外，您还可以为它提供一个url，其中包含一个带有适当过滤器的XML文件。^0|0|0|1F|0|0|0|J|6|0|0|0|0|0|0|0|0|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|1E|G|@]|H|@]|6|$]]|$A|I|C|8|2|E|F|1F|G|@]|H|@$J|1G|K|1H|A|1I]]|6|$]]|$A|L|C|M|2|E|F|1J|G|@]|H|@]|6|$]]|$A|N|C|O|2|E|F|1K|G|@$J|1L|K|1M|P|Q]]|H|@]|6|$]]|$A|R|C|S|2|T|F|1N|G|@]|H|@]|6|$]]|$A|U|C|V|2|T|F|1O|G|@]|H|@]|6|$]]|$A|W|C|X|2|T|F|1P|G|@]|H|@]|6|$]]|$A|Y|C|Z|2|T|F|1Q|G|@]|H|@]|6|$]]|$A|10|C|11|2|T|F|1R|G|@]|H|@]|6|$]]|$A|12|C|13|2|T|F|1S|G|@]|H|@]|6|$]]|$A|14|C|15|2|T|F|1T|G|@]|H|@]|6|$]]|$A|16|C|17|2|T|F|1U|G|@]|H|@]|6|$]]|$A|18|C|19|2|T|F|1V|G|@]|H|@]|6|$]]|$A|1A|C|1B|2|T|F|1W|G|@]|H|@]|6|$]]|$A|1C|C|1D|2|E|F|1X|G|@]|H|@]|6|$]]]]

You could try to add different filters to the background images:

<a href="https://css-tricks.com/almanac/properties/f/filter/" rel="nofollow">https://css-tricks.com/almanac/properties/f/filter/</a>

The downfall to this, is that it only works on images.

Basically, there are 10 built-in filters for the CSS <code>filter</code> property:

<ul>
<li>blur(px)</li>
<li>brightness(%)</li>
<li>contrast(%)</li>
<li>drop-shadow(h-shadow v-shadow blur spread color)</li>
<li>grayscale(%)</li>
<li>hue-rotate(deg)</li>
<li>invert(%)</li>
<li>opacity(%)</li>
<li>saturate(%)</li>
<li>sepia(%)</li>
</ul>

And additionally, you can provide it an url, wich contains an XML file with the appropariate filter.

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://codepen.io/jonitrythall/pen/GJQBOp|blocks|key|eov9f|text|我不知道你是否还在追问这个问题，但对于未来的其他用户：|unstyled|depth|inlineStyleRanges|entityRanges|cqmn2|这个效果可以通过CSS伪类来实现，不需要JavaScript！如下图所示：|9oc62|​|6q3qo|body,
main::before+{
++background:+url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg)+0+/+cover+fixed;
}

main+{
++margin:+100px+auto;
++position:+relative;
++padding:+10px+5px;
++background:+hsla(0,+0%25,+100%25,+.3);
++font-size:+20px;
++font-family:+'Lora',+serif;
++line-height:+1.5;
++border-radius:+10px;
++width:+60%25;
++box-shadow:+5px+3px+30px+black;
++overflow:+hidden;
}

main::before+{
++content:+'';
++margin:+-35px;
++position:+absolute;
++top:+0;
++right:+0;
++bottom:+0;
++left:+0;
++filter:+blur(20px);
++z-index:+-1;
}|code-block|syntax|javascript|eqj5p|"The+more+often+we+see+the+things+around+us+-+even+the+beautiful+and+wonderful+things+-+the+more+they+become+invisible+to+us.+That+is+why+we+often+take+for+granted+the+beauty+of+this+world:+the+flowers,+the+trees,+the+birds,+the+clouds+-
++++even+those+we+love.+Because+we+see+things+so+often,+we+see+them+less+and+less."
++++—
++++++
++++++++Joseph+B.+Wirthlin|bihp0|81uge|在Codepen上可以看到实时示例：|6bgo4|offset|length|1b14e|快速说明：|style|BOLD|crj71|根据HTML文档的结构，你的Z索引可能不同于示例中描述的索引。^0|0|0|0|0|0|0|0|0|16|0|0|0|5|0|C|2^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|15|G|@]|H|@]|6|$]]|$A|I|C|J|2|E|F|16|G|@]|H|@]|6|$]]|$A|K|C|L|2|E|F|17|G|@]|H|@]|6|$]]|$A|M|C|N|2|O|F|18|G|@]|H|@]|6|$P|Q]]|$A|R|C|S|2|O|F|19|G|@]|H|@]|6|$P|Q]]|$A|T|C|L|2|E|F|1A|G|@]|H|@]|6|$]]|$A|U|C|V|2|E|F|1B|G|@]|H|@]|6|$]]|$A|W|C|8|2|E|F|1C|G|@]|H|@$X|1D|Y|1E|A|1F]]|6|$]]|$A|Z|C|10|2|E|F|1G|G|@$X|1H|Y|1I|11|12]]|H|@]|6|$]]|$A|13|C|14|2|E|F|1J|G|@$X|1K|Y|1L|11|12]]|H|@]|6|$]]]]

I don't know if you're still chasing this question, but for other users in future:

This effect can be accomplished as follows with CSS Pseudo-Classes, no JavaScript is necessary!
shown below:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>body,
main::before {
 background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover fixed;
}

main {
 margin: 100px auto;
 position: relative;
 padding: 10px 5px;
 background: hsla(0, 0%, 100%, .3);
 font-size: 20px;
 font-family: 'Lora', serif;
 line-height: 1.5;
 border-radius: 10px;
 width: 60%;
 box-shadow: 5px 3px 30px black;
 overflow: hidden;
}

main::before {
 content: '';
 margin: -35px;
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 filter: blur(20px);
 z-index: -1;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;main&gt;
 &lt;blockquote&gt;"The more often we see the things around us &amp;#45; even the beautiful and wonderful things &amp;#45; the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds &amp;#45;
 even those we love. Because we see things so often, we see them less and less."
 &lt;footer&gt;&amp;mdash;
 &lt;cite&gt;
 Joseph B. Wirthlin
 &lt;/cite&gt;
 &lt;/footer&gt;
 &lt;/blockquote&gt;
&lt;/main&gt;</code></pre>
</div>
</div>


Live example can be seen on Codepen: <a href="https://codepen.io/jonitrythall/pen/GJQBOp" rel="noreferrer">https://codepen.io/jonitrythall/pen/GJQBOp</a>

Quick Note:

Depending on the structure of your HTML document, your z-indexes may be different to the one described in the example.

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://caniuse.com/css-backdrop-filter|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/actteam/d5d0451094fc1ffb96b931b2d04fd9c4.png|imageAlt|2|https://ask.qcloudimg.com/http-save/actteam/1ec304e8323c35a1cd75c1dbf175707d.png|blocks|key|eqdph|text|我用它来获得流行的磨砂玻璃效果。直到有人成功地发明了一种很好的多边形填充物|unstyled|depth|inlineStyleRanges|entityRanges|1avgj|backdrop-filter我使用略微透明的背景作为后备：|offset|length|style|CODE|envf6|/*+slightly+transparent+fallback+*/
.backdrop-blur+{
++background-color:+rgba(255,+255,+255,+.9);
}

/*+if+backdrop+support:+very+transparent+and+blurred+*/
@supports+((-webkit-backdrop-filter:+blur(2em))+or+(backdrop-filter:+blur(2em)))+{
++.backdrop-blur+{
++++background-color:+rgba(255,+255,+255,+.5);
++++-webkit-backdrop-filter:+blur(2em);
++++backdrop-filter:+blur(2em);
++}
}|code-block|syntax|javascript|1be2|过滤器将在目前支持浏览器。(启用了实验性Web平台功能的Safari和Chrome+)代码也应该可以在支持无前缀的未来浏览器中工作backdrop-filter如果规格在此之前没有改变的话。|9cfle|不支持背景滤镜和不支持背景滤镜的示例：|on5j|?|atomic|ap8lq|ci7vc|4qclj|4jovv|​^0|0|0|F|0|0|1T|F|5|4|0|0|0|0|1|1|0|0|1|2|0|0|0^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|A|4|B|6|$C|D|E|-4]]|F|$2|A|4|B|6|$C|G|E|-4]]]|H|@$I|J|K|L|2|M|N|1D|O|@]|P|@]|6|$]]|$I|Q|K|R|2|M|N|1E|O|@$S|1F|T|1G|U|V]]|P|@]|6|$]]|$I|W|K|X|2|Y|N|1H|O|@]|P|@]|6|$Z|10]]|$I|11|K|12|2|M|N|1I|O|@$S|1J|T|1K|U|V]]|P|@$S|1L|T|1M|I|1N]]|6|$Z|10]]|$I|13|K|14|2|M|N|1O|O|@]|P|@]|6|$]]|$I|15|K|16|2|17|N|1P|O|@]|P|@$S|1Q|T|1R|I|1S]]|6|$]]|$I|18|K|16|2|17|N|1T|O|@]|P|@$S|1U|T|1V|I|1W]]|6|$]]|$I|19|K|-4|2|M|N|1X|O|@]|P|@]|6|$]]|$I|1A|K|-4|2|M|N|1Y|O|@]|P|@]|6|$]]|$I|1B|K|1C|2|M|N|1Z|O|@]|P|@]|6|$]]]]

I use this to get the popular frosted glass effect. Until someone successfully invents a good polyfill for <code>backdrop-filter</code> I'm using a slightly transparent background as a fallback:
<pre><code>/* slightly transparent fallback */
.backdrop-blur {
 background-color: rgba(255, 255, 255, .9);
}

/* if backdrop support: very transparent and blurred */
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
 .backdrop-blur {
 background-color: rgba(255, 255, 255, .5);
 -webkit-backdrop-filter: blur(2em);
 backdrop-filter: blur(2em);
 }
}
</code></pre>
The filter will work in <a href="http://caniuse.com/#feat=css-backdrop-filter" rel="noreferrer">currently supported</a> browsers. (Safari and Chrome with experimental Web Platform features enabled) The code should also work in future browsers that support unprefixed <code>backdrop-filter</code> if the spec doesn't change before that.
Examples without and with backdrop-filter support:
<a href="https://i.stack.imgur.com/GdKaxm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GdKaxm.png" alt="transparent fallback" /></a>
<a href="https://i.stack.imgur.com/NrjcIm.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NrjcIm.png" alt="blurred" /></a>

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://codepen.io/avstorm/pen/FbBdy|blocks|key|5gmbg|text|使用SVG过滤器。他们的工作就像一个护身符。查看此示例代码笔。|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|bectm|backdrop-filter现在在Chrome+Canary中默认支持。它也在2019年Firefox开发的优先列表中。因此，它很快就会在所有浏览器中得到支持，但现在您可以使用SVG过滤器。|style|CODE|9snam|更新|BOLD|eroj2|SVG过滤器的工作原理与backdrop-filter..。这只是一种变通方法，如果它下面有移动的元素，它就不起作用。不管怎样，我想我们可以利用backdrop-filter|ekjo5|很快就会投入生产。它现在在Chrome+Beta中默认启用！这也意味着边缘。^0|R|4|0|0|0|F|0|0|2|0|C|F|20|F|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|V|G|@]|H|@$I|W|J|X|A|Y]]|6|$]]|$A|K|C|L|2|E|F|Z|G|@$I|10|J|11|M|N]]|H|@]|6|$]]|$A|O|C|P|2|E|F|12|G|@$I|13|J|14|M|Q]]|H|@]|6|$]]|$A|R|C|S|2|E|F|15|G|@$I|16|J|17|M|N]|$I|18|J|19|M|N]]|H|@]|6|$]]|$A|T|C|U|2|E|F|1A|G|@]|H|@]|6|$]]]]

Use SVG filters. <strike>They work like a charm.</strike> Checkout this example <a href="https://codepen.io/andreasstorm/pen/FbBdy" rel="noreferrer">CodePen</a>.

<code>backdrop-filter</code> is now supported by default in Chrome Canary. It's also in the 2019 priority list for Firefox development. So, it will soon be supported across all browsers, but for now you can use SVG filters.

<h3>Update</h3>

SVG filters don't work exactly like <code>backdrop-filter</code>. It's only a workaround and it doesn't work if there's moving elements beneath it. Anyway, I think we're going to be able to use <code>backdrop-filter</code> in production very soon. It's now enabled by default in Chrome Beta! Which also means Edge.

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://web.dev/backdrop-filter/|1|https://groups.google.com/g/mozilla.dev.platform/c/1MN77cE21fE/m/Fej_wGI7AQAJ|blocks|key|b58l|text|从Chrome+M76开始，backdrop-filter现在已经发布，没有前缀，也没有需要的标志。|unstyled|depth|inlineStyleRanges|entityRanges|flfo4|offset|length|2nv9|注意：(因为这个答案一直被否决，因为Mozilla还没有发布它)：这个功能在Safari，Chrome和Edge中都有，但在Firefox中还没有。Mozilla是规划很快就会发货，但现在还没有。因此，这个答案并不包含“变通方法”，而只是包含有关哪些浏览器的更多信息要求一种解决方法。这看起来仍然是有用的信息。|style|BOLD^0|0|0|W|0|0|3P|2|2A|2|1^^$0|$1|$2|3|4|5|6|$7|8]]|9|$2|3|4|5|6|$7|A]]]|B|@$C|D|E|F|2|G|H|R|I|@]|J|@]|6|$]]|$C|K|E|8|2|G|H|S|I|@]|J|@$L|T|M|U|C|V]]|6|$]]|$C|N|E|O|2|G|H|W|I|@$L|X|M|Y|P|Q]]|J|@$L|Z|M|10|C|11]]|6|$]]]]

As of Chrome M76, backdrop-filter is now shipped, unprefixed, and without a needed flag.
<a href="https://web.dev/backdrop-filter/" rel="noreferrer">https://web.dev/backdrop-filter/</a>
NOTE: (since this answer keeps getting downvoted because Mozilla hasn’t yet shipped it): this feature is available in Safari, Chrome, and Edge, but not yet in Firefox. Mozilla is <a href="https://groups.google.com/g/mozilla.dev.platform/c/1MN77cE21fE/m/Fej_wGI7AQAJ" rel="noreferrer">planning</a> to ship it very soon, but hasn’t yet. So this answer doesn’t contain a “workaround” but simply more information about which browsers require a workaround. Which still seems like useful information.

entityMap|blocks|key|4j3g7|text|我只想添加一些对我有效的解决方法，也许这对外面的人很有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|22k4v|其思想是将应该位于弹出窗口后面的每个元素包装到.blurred让它变得模糊|offset|length|style|CODE|cnm4g|filter:+blur(10px);(它有更好的浏览器支持)到它，但是弹出元素本身应该在外部.blurred..。|38uri|在代码中，它看起来像这样：|8unv2|.blurred+{
++++position:+relative;
++++z-index:+0;
++++filter:+blur(4px);
}

.popup+{
++++position:+absolute;
++++z-index:+1;
++++top:+0;
++++right:+0;
++++bottom:+0;
++++left:+0;
}

.popup__box+{
++++margin-top:+20px;
++++background-color:+rgba(255,+0,+0,+.1);
+}|code-block|syntax|javascript|eh5mr|Maybe+a+navbar+goes+here
++Hi,+I'm+blurred
++
++Maybe+a+footer+goes+here



++
++++Hi,+I'm+a+popup|c1aba|​|6nilc|此解决方法的缺点是您必须将所有内容包装在.blurred类，有时(至少对我来说)很难用外部的其他元素来管理z-index。^0|0|N|8|0|0|J|1B|8|0|0|0|0|0|K|8^^$0|$]|1|@$2|3|4|5|6|7|8|X|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|Y|9|@$E|Z|F|10|G|H]]|A|@]|B|$]]|$2|I|4|J|6|7|8|11|9|@$E|12|F|13|G|H]|$E|14|F|15|G|H]]|A|@]|B|$]]|$2|K|4|L|6|7|8|16|9|@]|A|@]|B|$]]|$2|M|4|N|6|O|8|17|9|@]|A|@]|B|$P|Q]]|$2|R|4|S|6|O|8|18|9|@]|A|@]|B|$P|Q]]|$2|T|4|U|6|7|8|19|9|@]|A|@]|B|$]]|$2|V|4|W|6|7|8|1A|9|@$E|1B|F|1C|G|H]]|A|@]|B|$]]]]

Just want to add specific workaround that works for me, maybe it's useful for someone out there.
The idea is to wrap every element that should be behind the popup into <code>.blurred</code> and make it blur with <code>filter: blur(10px);</code> (which has better browser support) to it, but then the popup element itself should be outside <code>.blurred</code>.
in code it looks like this:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.blurred {
 position: relative;
 z-index: 0;
 filter: blur(4px);
}

.popup {
 position: absolute;
 z-index: 1;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

.popup__box {
 margin-top: 20px;
 background-color: rgba(255, 0, 0, .1);
 }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="blurred"&gt;
 &lt;div&gt;Maybe a navbar goes here&lt;/div&gt;
 &lt;h3&gt;Hi, I'm blurred&lt;/h3&gt;
 &lt;img src="https://filesamples.com/samples/image/jpg/sample_640%C3%97426.jpg" alt="sample"/&gt;
 &lt;div&gt;Maybe a footer goes here&lt;/div&gt;
&lt;/div&gt;

&lt;div class="popup"&gt;
 &lt;div class="popup__box"&gt;
 Hi, I'm a popup
 &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>

The downside to this workaround is that you have to wrap everything inside the <code>.blurred</code> class, which can be hard (at least for me) sometimes to manage the z-index with other element outside.

entityMap|0|type|LINK|mutability|MUTABLE|data|url|https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter|blocks|key|1dd6d|text|如上所述这一页更改首选项值layout.css.backdrop-filter.enabled|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|al04t|来自false至true在about:config佩奇似乎很适合我。|erc4i|我使用的是Firefox+Developer+87.0b1+(64位)^0|D|Y|4|3|0|0|2|5|8|4|D|C|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|Q|G|@$H|R|I|S|J|K]]|L|@$H|T|I|U|A|V]]|6|$]]|$A|M|C|N|2|E|F|W|G|@$H|X|I|Y|J|K]|$H|Z|I|10|J|K]|$H|11|I|12|J|K]]|L|@]|6|$]]|$A|O|C|P|2|E|F|13|G|@]|L|@]|6|$]]]]

As explained on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter" rel="nofollow noreferrer">this page</a> changing the value of the preference <code>layout.css.backdrop-filter.enabled</code> from <code>false</code> to <code>true</code> on the <code>about:config</code> page seems to work for me.
I'm using Firefox Developer 87.0b1 (64 bits)

<code>backdrop-filter</code> is a recent CSS feature, that is not yet available in modern browsers (at least as of July 1, 2016). 

<ul>
<li>Chrome 51 supports <code>backdrop-filter</code> via Experimental Web Platform flag.</li>
<li>Safari 9.1 supports it with <code>-webkit-</code> prefix</li>
<li>Firefox 47 have no support</li>
</ul>

Being in such an unusable state, I would like to know whether there exists any alternative way to bring in the same result.

JS workarounds for <code>blur</code>, <code>grayscale</code>,… are also welcome

The development of <code>backdrop-filter</code> can be tracked through <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=497522" rel="noreferrer">https://bugs.chromium.org/p/chromium/issues/detail?id=497522</a>

CSS: Workaround to backdrop-filter?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 backdrop-filter是最近的CSS功能，在现代浏览器中还不能使用(至少在2016年7月1日)。 Chrome 51支持backdrop-filter通过实验Web平台标志。 Safari 9.1支持它-webkit-前缀 Firefox 47不支持 在这种不可用的状态下，我想知道是否有其他方法可以带来同样的...

问CSS:解决背景滤镜的问题？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:解决背景滤镜的问题？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS:解决背景滤镜的问题？
EN