CSS-透明“玻璃”模态，一切都变暗了 [英] CSS -- transparent "glass" modal, everything else darkened

问题描述

< hr>

原始问题

我正在一个项目中，我们要显示一个模式，透视到背景，但模态面板之外的任何地方都被略微掩盖。

我已成功使用 border-radius：10010px border：10000px rgba（0,0,0,0.3）但这是一个黑客，我不能勾勒出一个 box-shadow

标准方式做这个？

解决方案

---- JSBin示例 ----

---

答案是使用 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: background-attachment

---

----- JSBin Example ----

---

The answer is to use background-attachment

---

ORIGINAL QUESTION

I'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-shadow

Is 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.

解决方案

---- JSBin Example ----

---

The answer is to use 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);

---

.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 default

You then scale with background-size percentages or cover

When using background: shorthand, make sure to use a / to separate background-position from background-scale amounts

---

I 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 screen

I also used a gradient, credit -- How to darken a background Image

这篇关于CSS-透明“玻璃”模态，一切都变暗了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！