前言：
如今兄弟们对“css毛玻璃样式”大体比较关注，朋友们都想要剖析一些“css毛玻璃样式”的相关资讯。那么小编也在网摘上收集了一些关于“css毛玻璃样式””的相关知识，希望小伙伴们能喜欢，朋友们快快来了解一下吧！半透明颜色最初的使用场景之一就是作为背景。将其叠放在照片类或其他花哨的背层之上，可以减少对比度，确保文本的可读性。这种效果确实很有视觉冲击力，但仍然可能会导致文字很难阅读。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); font: 150%/1.6 Baskerville, Palatino, serif; background: url("../img/tiger.jpg") 0 /cover fixed; } main{ background: hsla(0, 0%, 100%,.1); margin: 0 auto; max-width: 23em; } </style></head><body><main> <main> <blockquote>“The only way to get rid of a temptation is to yield to it. Resist it, and your soul grows sick with longing for the things it has forbidden to itself, with desire for what its monstrous laws have made monstrous and unlawful.”</em> <footer>— <cite>Oscar Wilde, The Picture of Dorian Gray</cite></footer> </blockquote> </main></main></body></html>你会发现，文字确实难以看清，当然你可以通过提升它的透明度来增加文本的可读性，但就不那么生动了。
main{ background: hsla(0, 0%, 100%,.3); margin: 0 auto; max-width: 23em; }增加透明度为30%
解决方案
首先我们添加一个伪元素：
main{ position: relative; background: hsla(0, 0%, 100%,.3); margin: 0 auto; max-width: 23em; } main::before{ content: ''; position: absolute; top: 0;right: 0;bottom: 0;left: 0; background-color: rgba(255,0,0,.5); z-index: -1; }现在把半透明红色换掉，换成和背层完全匹配的背景。
<style> body { min-height: 100vh; box-sizing: border-box; margin: 0; padding-top: calc(50vh - 6em); font: 150%/1.6 Baskerville, Palatino, serif; } body, main::before{ background: url("../img/tiger.jpg") 0 /cover fixed; } main{ position: relative; background: hsla(0, 0%, 100%,.2); margin: 0 auto; max-width: 26em; overflow: hidden; } main::before{ content: ''; position: absolute; top: 0;right: 0;bottom: 0;left: 0; filter: blur(20px); margin: -30px; z-index: -1; } </style> 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #css毛玻璃样式
