CSS——透明的“玻璃”模式，其他一切都变暗了

Question

THE ANSWER: background-attachment

---

-----JSBin Example----

---

答案是使用background-attachment

---

原始问题

我正在做一个项目，我们想要显示一个“透视”到背景的模态，但模态面板之外的任何地方都被稍微遮住了。

我已成功使用 border: 10000px rgba(0,0,0,0.3) 和 border-radius: 10010px，但这是一个 hack，我无法使用 box-shadow 勾勒模态框

有什么标准方法可以做到这一点吗？如果您能想到一种将透明度滤镜渐变应用于图像的方法，则可以加分。

Answer 1

我认为你在这里得到的最佳选择是有一个 3 行，其中中间一个包含 3 列，并且上下行和左右列（中间行）具有变暗的背景：

$(function() {
  $('button').click(function() {
    tpl = '<div class="modal-reverse-container"><div class="r1"></div><div class="r2"><div class="c1"></div><div class="c2"></div><div class="c3"></div></div><div class="r3"></div></div>'
    $('body').append($(tpl));
    $('.modal-reverse-container').width($(document).width());
    $('.modal-reverse-container').height($(document).height());
    $('.modal-reverse-container r1, .modal-reverse-container r2').height($(document).height());
  });
  $(document).on('click', '.modal-reverse-container', function() {
    $(this).remove();
  });
});

td {
  text-align: center;
  background: red;
}
.modal-reverse-container {
  position: absolute;
  top: 0;
  left: 0;
}
.modal-reverse-container .r1, .modal-reverse-container .r2, .modal-reverse-container .r3 {
  height: 33%;
}
.modal-reverse-container .r1, .modal-reverse-container .r3 {
  background: rgba(0, 0, 0, 0.7);
}
.modal-reverse-container .r2 .c1, .modal-reverse-container .r2 .c2, .modal-reverse-container .r2 .c3 {
  width: 33%;
  height: 100%;
  float: left;
}
.modal-reverse-container .r2 .c3 {
  float: right;
}
.modal-reverse-container .r2 .c1, .modal-reverse-container .r2 .c3 {
  background: rgba(0, 0, 0, 0.7);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<img src="https://dummyimage.com/600x400/d950d9/fff" />
<div>
  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</div>
<button>Set reverse-modal</button>

Answer 2

---- JSBin Example ----

---

答案是使用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
}

最佳值是fixed（并非所有设备都支持固定），这样您的背景和模态可以默认共享相同的视口X 和Y (0, 0)

然后您可以使用background-size 百分比或cover 进行缩放

使用background: 速记时，请确保使用/ 将background-position 与background-scale 金额分开

---

我在旧设备上遇到了一个错误，因此我使用了local，然后手动计算了leftX 和topY 在我的视口上将背景和模态面板background-position 对齐到(0, 0)。

然后我用相同的百分比缩放两个图像，以覆盖屏幕

我还使用了渐变，感谢 -- How to darken a background Image