来自 Fluent Design System 的纯 CSS 丙烯酸材料
Posted
技术标签:
【中文标题】来自 Fluent Design System 的纯 CSS 丙烯酸材料【英文标题】：CSS-only Acrylic Material from Fluent Design System 【发布时间】：2017-11-15 06:42:13 【问题描述】：随着 Microsoft 的 Fluent Design System 的出现以及新的 Acrylic Material 在 Windows 生态系统中的传播，我认为在某些 Web 布局中使用它会很棒。
根据the spec，亚克力层的组成为：
所以我尝试了一种受该图片中的图层启发的纯 CSS 方法，这样：
body
margin: 0;
font: 1em/1.4 Sans-serif;
background: url("https://cdn.pixabay.com/photo/2017/03/27/16/50/beach-2179624_1280.jpg") center center;
background-size: 100vw auto;
main
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
.acrylic
padding: 4em 6em;
position: relative;
overflow: hidden;
.acrylic::before
background: url("https://cdn.pixabay.com/photo/2017/03/27/16/50/beach-2179624_1280.jpg") center center;
background-size: 100vw auto;
filter: blur(10px);
content: "";
position: absolute;
left: -10px;
top: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
z-index: -1;
.acrylic::after
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: 0.65;
border: 1px solid #fff;
background: #fff;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZa***APcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
.shadow
border-radius: 1px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
<main>
<div class="acrylic shadow">
Acrylic material!
</div>
</main>结果真的很接近规范，也很响应，但有一个大问题：只需堆叠另一个.acrylic div，后台技巧就不再起作用了。
问题是： 有没有更聪明的方法来高斯模糊而不为每个孩子复制身体背景？或者也许是一些更聪明的方法来动态计算它的位置？
更新
自从backdrop-filter CSS 功能终于在 7 月 29 日shipped in Chrome 76ᵗʰ，我们have a really simplified approach to solve it，比以前更容易解决原来的问题。
【问题讨论】：
我相信我的回答可以完美地做到这一点，而不会影响任何功能，甚至会增加更多的浏览器兼容性。我希望你会考虑它。 【参考方案1】：有两种方法可以做到这一点...
.acrylic 上的 bg 模糊
实现复杂，但可在大多数现代浏览器上运行。
backdrop-filter .acrylic
非常简单的实现，但缺乏浏览器支持。
1。 .acrylic上的模糊背景
我们也需要在 .acrylic 上复制 bg，因为只是降低不透明度会显示它们背后的内容而不是它们，AFAIK 没有被模糊过滤器覆盖......
计算位置的明智方法是为父元素 (body) 和 .acrylic 设置 background-attachment: fixed，这将允许您拥有多个 .acrylic 人员；)
由于我们为父母和孩子使用相同的背景，我们可以将它们组合在一起;)
body, .acrylic::before
background: url("IMG_URL_HERE") center/cover;
background-attachment: fixed;
这是一个有效的 sn-p ;)
将.acrylic:after 的不透明度调低一点，这样背景就更明显了；）
body
margin: 0;
font: 1em/1.4 Sans-serif;
body, .acrylic::before
background: url("https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?w=700") center/cover;
background-attachment: fixed;
main
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
.acrylic
padding: 4em 6em;
position: relative;
overflow: hidden;
margin: 1em;
.acrylic::before
filter: blur(10px);
content: "";
position: absolute;
left: -10px;
top: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
z-index: -1;
.acrylic::after
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: 0.35;
border: 1px solid #fff;
background: #fff;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZa***APcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
.shadow
border-radius: 1px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
<main>
<div class="acrylic shadow">
Acrylic material!
</div>
<div class="acrylic shadow">
Acrylic material!
</div>
</main>
<main>
<div class="acrylic shadow">
Acrylic material!
</div>
<div class="acrylic shadow">
Acrylic material!
</div>
</main>
<main>
<div class="acrylic shadow">
Acrylic material!
</div>
</main>2。 （较少支持）backdrop-filter on .acrylic
main
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
.acrylic
padding: 4em 6em;
position: relative;
background: rgba(0,0,0,0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
margin: 7px;
body
background: url("https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?w=700") center/cover;
background-attachment: fixed;
margin: 0;
font: 1em/1.4 Sans-serif;
color: #fff;
<main>
<div class="acrylic shadow">
Acrylic material!
</div>
<div class="acrylic shadow">
Acrylic material!
</div>
</main>
<main>
<div class="acrylic shadow">
Acrylic material!
</div>
<div class="acrylic shadow">
Acrylic material!
</div>
</main>
<main>
<div class="acrylic shadow">
Acrylic material!
</div>
</main>【讨论】：
你的图片似乎不适合我，所以从 unsplash 中添加了一张 ;) 让我知道它是如何为你工作的 ;) 我很好奇，您的答案中经常使用的;) 是某种标点符号还是只是一个笑脸？ :D 并贡献一些有用的东西：caniuse.com/backdrop-filter.
好吧，当我使用笑脸时，我会跳过逗号或句号；）感谢您的贡献：）【参考方案2】：
这个答案解决了这个问题，我也对其进行了增强。
我认为您遇到的唯一问题是应用于 ::before 的背景对齐方式和正文不同。因此，通过将使用的 CSS 合二为一，我将其简化为更轻松的更新和编辑。
我使用 background:rgba() 而不是 #hex 值来为不透明度控件提供更大的灵活性。
我在整个 CSS 中添加了注释来解释我所做的更改以使其更加明显。
注意：从 ::after 类中删除不透明度会导致透明度增加并增加噪声纹理的可见性。我相信这是由于噪声纹理本身是半透明的，但这是一种奇怪的行为，如果其他人知道并且有更好的解释，我很想知道。我添加了 .nested 和 .parent 类。因为最好分别控制这些事情。我在第二个示例和第三个示例中都删除了 .parent。
更新：注意到规范中提到的排除混合过滤器不包括在内，所以我也添加了它。在 sn-p 下方提供了来源。
希望这会有所帮助。 :)
带有 3 个示例的 CSS 和 html 片段：
/* Adding the background source for
both elements together simplifies editing.
Changing the background color #333 to #fff
will produce much more intence effect on
the filter blend */
html,
.acrylic:before
background: #333 url(https://source.unsplash.com/1600x900/?nature) 50% 100% fixed;
background-size: cover;
body
margin: 0;
font: 1em/1.4 Sans-serif;
/*div spacings*/
div
margin: 5px;
main
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
height: 100vh;
.acrylic
padding: 4em 6em;
position: relative;
overflow: hidden;
/*Added browser compatibility for blurring added the exclusion blend filter as explained in the original document*/
.acrylic::before
content: '';
position: absolute;
z-index: -1;
height: 100%;
top: 0;
right: 0;
left: 0;
filter: blur(8px);
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
-ms-filter: blur(8px);
background-blend-mode: exclusion;
/*made color rgba removed opacity property*/
.acrylic::after
content: "";
position: absolute;
height: 100%;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
border: 1px solid #fff;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZa***APcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
/*Individual control over
.nested and .parent opacity and color.*/
.parent::after
background-color: rgba(230, 240, 255, 0.50);
opacity: 0.60;
.child::after
background-color: rgba(230, 240, 255, 0.30);
opacity: 0.60;
.shadow
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 1px 8px rgba(0, 0, 0, 0.4);
<body>
<main>
<div class="acrylic shadow parent">
<div class="acrylic child">
Acrylic material! <br />.parent on .child on
</div>
</div>
<div class="acrylic shadow">
<div class="acrylic child">
Acrylic material! <br />.parent off .child on
</div>
</div>
<div class="acrylic shadow">
<div class="acrylic">
Acrylic material! <br />.parent off .child off
</div>
</div>
</main>
</body>来源和额外说明：
您可以在CSS Tricks here.找到前玻璃效果的来源
复制图像技术需要保持图像模糊 与原始文件一起，如果您需要重复使用，这可能会变得很痛苦 多张图片的效果。例如，响应式设计可能 需要在不同的屏幕尺寸下交换不同的图像。要么， 模板布局可能会动态地放入图像中（例如，不同的 每篇博文的标题图片）。对于这些情况，它会很好 仅使用源图像生成效果。毕竟我们是 只是模糊它。
他们还说，如果你想提供更多的浏览器支持，你可以添加 SVG 过滤器作为后备，虽然我没有将它添加到我自己的 sn-p 他们说：
CSS 过滤器有点新。这意味着它们可能带有供应商前缀， 并且他们的浏览器支持还不是普遍的。然而，过滤器 在 SVG 中有较长的历史，并将 SVG 过滤器应用于 HTML 内容 via CSS 具有更广泛的浏览器支持。您可以轻松地将它们添加为 不支持 CSS 过滤器时的后备。上面的demo 实际上就是这样做的。
要添加 SVG 过滤器，我们在 HTML 标记中包含一些内联 SVG， 并使用 url() 引用过滤器。专业提示：另一种方法是 将 SVG 过滤器和引用编码为数据 url，但该格式是 在文章中阅读起来有点困难。
并提供了代码示例
SVG：
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="blur">
<feGaussianBlur stdDeviation="5" />
</filter>
</defs>
</svg>
CSS
.glass::before
background-image: url('pelican.jpg');
/* Fallback to SVG filters */
filter: url('#blur');
filter: blur(5px);
有关 CSS 过滤器混合的更多信息，请访问此处 https://css-tricks.com/basics-css-blend-modes
【讨论】：
【参考方案3】：自 2019 年 7 月 29 日起，backdrop-filter CSS 功能终于有了shipped in Chrome 76。不幸的是，Firefox 已经推迟了很多时间，而且它已经在 it's really uncertain when it'll be available by default without the flag 标志后面实现并工作了。
但是有了一个非常不错的support on about 90% browsers，它显然是目前渐进增强用例的最佳选择。所以，我相信现在最好的答案就是：
/* Now all the acrylic layer is just only one class! */
.acrylic
/* Parent background + Gaussian blur */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
/* Exclusion blend */
background-blend-mode: exclusion;
/* Color/tint overlay + Opacity */
background: rgba(255, 255, 255, .6);
/* Tiled noise texture */
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZa***APcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
/* Other styles for sample purposes... */
body
margin: 0;
padding: 1.5em;
font: 1em/1.4 Sans-serif;
/* Now our background image is defined only in the body! */
background: url("https://cdn.pixabay.com/photo/2017/03/27/16/50/beach-2179624_1280.jpg") center center;
background-size: 100vw auto;
main
display: grid;
gap: 1.5rem;
justify-content: center;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-auto-rows: minmax(120px, auto);
div
padding: 1.5em;
border-radius: 1px;
border: 1px solid rgba(255, 255, 255, .2);
box-shadow: 0 10px 30px rgba(0, 0, 0, .1), 0 1px 8px rgba(0, 0, 0, .2);
text-align: center;
display: flex;
align-items: center;
justify-content: center;
<main>
<div class="acrylic">
Acrylic material!
</div>
<div class="acrylic">
<div class="acrylic">
Acrylic inside acrylic!
</div>
</div>
<div class="acrylic">
Acrylic material!
</div>
<div class="acrylic">
Acrylic material!
</div>
</main>【讨论】：
【参考方案4】：有没有更聪明的方法来高斯模糊而不复制 每个孩子的身体背景？
据我所知，在这种情况下没有更聪明的方法可以实现这一点，因为 background image 和 filter 必须设置为相同的 div 才能创建所需的效果。
或者也许是一些更聪明的方法来动态计算它的位置？
据我了解，问题在于每增加一个 div .acrylic，图像的背景部分就会重复。
由于您使用的是相同的背景图片，您只需将 background-attachment: fixed 添加到 div .acrylic::before 即可解决此问题。
body
margin: 0;
font: 1em/1.4 Sans-serif;
background: url("http://www.wallpapers-web.com/data/out/191/5484624-sunset-wallpapers.jpg") center center;
background-size: 100vw auto;
main
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
.acrylic
padding: 4em 6em;
position: relative;
overflow: hidden;
.acrylic::before
background: url("http://www.wallpapers-web.com/data/out/191/5484624-sunset-wallpapers.jpg") center center;
background-size: 100vw auto;
background-attachment: fixed;
filter: blur(10px);
content: "";
position: absolute;
left: -10px;
top: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
z-index: -1;
.acrylic::after
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: 0.65;
border: 1px solid #fff;
background: #fff;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAAUVBMVEWFhYWDg4N3d3dtbW17e3t1dXWBgYGHh4d5eXlzc3OLi4ubm5uVlZWPj4+NjY19fX2JiYl/f39ra2uRkZGZmZlpaWmXl5dvb29xcXGTk5NnZ2c8TV1mAAAAG3RSTlNAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEAvEOwtAAAFVklEQVR4XpWWB67c2BUFb3g557T/hRo9/WUMZHlgr4Bg8Z4qQgQJlHI4A8SzFVrapvmTF9O7dmYRFZ60YiBhJRCgh1FYhiLAmdvX0CzTOpNE77ME0Zty/nWWzchDtiqrmQDeuv3powQ5ta2eN0FY0InkqDD73lT9c9lEzwUNqgFHs9VQce3TVClFCQrSTfOiYkVJQBmpbq2L6iZa***APcoU0dSw0SUTqz/GtrGuXfbyyBniKykOWQWGqwwMA7QiYAxi+IlPdqo+hYHnUt5ZPfnsHJyNiDtnpJyayNBkF6cWoYGAMY92U2hXHF/C1M8uP/ZtYdiuj26UdAdQQSXQErwSOMzt/XWRWAz5GuSBIkwG1H3FabJ2OsUOUhGC6tK4EMtJO0ttC6IBD3kM0ve0tJwMdSfjZo+EEISaeTr9P3wYrGjXqyC1krcKdhMpxEnt5JetoulscpyzhXN5FRpuPHvbeQaKxFAEB6EN+cYN6xD7RYGpXpNndMmZgM5Dcs3YSNFDHUo2LGfZuukSWyUYirJAdYbF3MfqEKmjM+I2EfhA94iG3L7uKrR+GdWD73ydlIB+6hgref1QTlmgmbM3/LeX5GI1Ux1RWpgxpLuZ2+I+IjzZ8wqE4nilvQdkUdfhzI5QDWy+kw5Wgg2pGpeEVeCCA7b85BO3F9DzxB3cdqvBzWcmzbyMiqhzuYqtHRVG2y4x+KOlnyqla8AoWWpuBoYRxzXrfKuILl6SfiWCbjxoZJUaCBj1CjH7GIaDbc9kqBY3W/Rgjda1iqQcOJu2WW+76pZC9QG7M00dffe9hNnseupFL53r8F7YHSwJWUKP2q+k7RdsxyOB11n0xtOvnW4irMMFNV4H0uqwS5ExsmP9AxbDTc9JwgneAT5vTiUSm1E7BSflSt3bfa1tv8Di3R8n3Af7MNWzs49hmauE2wP+ttrq+AsWpFG2awvsuOqbipWHgtuvuaAE+A1Z/7gC9hesnr+7wqCwG8c5yAg3AL1fm8T9AZtp/bbJGwl1pNrE7RuOX7PeMRUERVaPpEs+yqeoSmuOlokqw49pgomjLeh7icHNlG19yjs6XXOMedYm5xH2YxpV2tc0Ro2jJfxC50ApuxGob7lMsxfTbeUv07TyYxpeLucEH1gNd4IKH2LAg5TdVhlCafZvpskfncCfx8pOhJzd76bJWeYFnFciwcYfubRc12Ip/ppIhA1/mSZ/RxjFDrJC5xifFjJpY2Xl5zXdguFqYyTR1zSp1Y9p+tktDYYSNflcxI0iyO4TPBdlRcpeqjK/piF5bklq77VSEaA+z8qmJTFzIWiitbnzR794USKBUaT0NTEsVjZqLaFVqJoPN9ODG70IPbfBHKK+/q/AWR0tJzYHRULOa4MP+W/HfGadZUbfw177G7j/OGbIs8TahLyynl4X4RinF793Oz+BU0saXtUHrVBFT/DnA3ctNPoGbs4hRIjTok8i+algT1lTHi4SxFvONKNrgQFAq2/gFnWMXgwffgYMJpiKYkmW3tTg3ZQ9Jq+f8XN+A5eeUKHWvJWJ2sgJ1Sop+wwhqFVijqWaJhwtD8MNlSBeWNNWTa5Z5kPZw5+LbVT99wqTdx29lMUH4OIG/D86ruKEauBjvH5xy6um/Sfj7ei6UUVk4AIl3MyD4MSSTOFgSwsH/QJWaQ5as7ZcmgBZkzjjU1UrQ74ci1gWBCSGHtuV1H2mhSnO3Wp/3fEV5a+4wz//6qy8JxjZsmxxy5+4w9CDNJY09T072iKG0EnOS0arEYgXqYnXcYHwjTtUNAcMelOd4xpkoqiTYICWFq0JSiPfPDQdnt+4/wuqcXY47QILbgAAAABJRU5ErkJggg==);
.shadow
border-radius: 1px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
<main>
<div class="acrylic shadow">Acrylic material!</div>
<div class="acrylic shadow">Acrylic material!</div>
<div class="acrylic shadow">Acrylic material!</div>
</main>【讨论】：
以上是关于来自 Fluent Design System 的纯 CSS 丙烯酸材料的主要内容，如果未能解决你的问题，请参考以下文章
[UWP]如何使用Fluent Design System (上)
微软新一代设计语言-Microsoft Fluent Design System