CSS-透明“玻璃”模态，一切都变暗了

本文介绍了CSS-透明“玻璃”模态，一切都变暗了的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我正在一个项目中，我们要显示一个模式，透视到背景，但模态面板之外的任何地方都被略微掩盖。 我已成功使用 border-radius：10010px border：10000px rgba（0,0,0,0.3）但这是一个黑客，我不能勾勒出一个 box-shadow 标准方式做这个？ 解决方案 答案是使用 background-attachment background-attachment：fixed; background-size：cover; background-position：center center; background-image：linear-gradient（rgba（0,0,0,0.4），rgba（0,0,0,0.4）），url（http://imgur.com/oVaQJ8F.png）; 。模式背景{ background：url（myurl.png）center center / cover no-repeat fixed } .modal-panel { background：url myurl.png）center center / cover no-repeat fixed } 固定（不是所有设备都支持固定），以便您的背景和您的模态可以共享同一视口 X code> Y $ 缩放 background-size 百分比或盖 使用 background：速记，请务必使用 / 分隔 background-position 来自 background-scale amount 因此我使用 local 然后手动计算 leftX 和 topY 以排列背景和模式面板 background-position 在（0,0） 我在我的视口。 也使用渐变，信用 - 如何变暗背景图片The answer is to use background-attachmentI'm working on a project where we want to display a modal that "sees through" to the backdrop, but everywhere outside of the modal panel is slightly masked.I have successfully used border: 10000px rgba(0,0,0,0.3) with border-radius: 10010px but this is a hack, and I can't outline the modal with a box-shadowIs there any standard way for doing this? Bonus points if you can think of a way to apply a transparency filter gradient to an image. 解决方案The answer is to use background-attachmentbackground-attachment: fixed;background-size: cover;background-position: center center;background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(http://imgur.com/oVaQJ8F.png);.modal-backdrop { background: url(myurl.png) center center / cover no-repeat fixed}.modal-panel { background: url(myurl.png) center center / cover no-repeat fixed}The best value would be fixed (not all devices support fixed) so that your backdrop and your modal can share the same viewport X and Y (0, 0) by defaultYou then scale with background-size percentages or coverWhen using background: shorthand, make sure to use a / to separate background-position from background-scale amountsI ran into a bug on an older device, so I used local then manually computed leftX and topY to line up backdrop and modal-panel background-position at (0, 0) on my viewport.I then scaled both images with the same percentage, to cover the screenI also used a gradient, credit -- How to darken a background Image 这篇关于CSS-透明“玻璃”模态，一切都变暗了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！