Question

当转换模式背景的不透明度时，我有一个奇怪的行为。过渡从0开始，以1结束。我看到过渡在没有其他HTML元素的区域中起作用。从0到1完全消失。

但是我使用固定的页眉和页脚。从0转换到0.9999时，页眉/页脚始终在模态上完全可见。当不透明度达到值1时，它将最终与页眉和页脚重叠。

我最初想到的是z-index，但这没有意义，因为当不透明度达到1时，它与页眉和页脚重叠。

#header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    background-color: #002d42;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 56px;
    background-color: red; /** #004666 **/
}

我希望模态背景也会在固定的页眉和页脚元素上淡化，并且不仅在不透明度达到值1时重叠。

Answer 1

您也需要为模态容器提供固定位置

df.withColumn("valid_json", from_json($"json", schema))
  .select("valid_json")
  .show(false)

//Output
+-------------------------------------------------------+ 
|valid_json                                             | 
+-------------------------------------------------------+ 
|[1, 1557994974, [[1, 3, something], [2, 3, something]]]| 
|null                                                   | 
|[3,,]                                                  | 
|[3, 1557994976, [[1, 3, something], [2, 3,]]]          | 
|[4, 1557994977, []]                                    | 
+-------------------------------------------------------+

如果不是，则默认情况下它的位置是静态的，并且直到其子#modal { visibility: visible; opacity: 1; -webkit-transition: opacity 2s ease; position: fixed; z-index: 9999; }完全加载时才关心z索引。

位置<div class="modal">或relative也可以，但默认位置absolute无效。

CSS不透明度仅适用于0或1

1 个答案: