html - Bootstrap CSS 固定 bg 定位

Question

我正在开发一个基于 bootstrap、html 和 css 的网站，其 html 中具有以下结构：

wrapper for fixed footer at bottom {
  content
  fixed bg
  content
}

所有东西的包装器都有一个相对定位。固定的 bg 本身将是::

figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}

<figure>
 <div class="fixed-wrap">
    <div id="fixed">
   </div>
 </div>
</figure>

问题是下面的固定背景和内容没有固定在正确的位置。我认为这里的问题是我的CSS。

使用这个 css，根本不会显示固定的 bg。如果我将图形的位置更改为绝对位置，则会显示它，但联系表格会与其重叠。这是我在这里的第一篇文章，如果有点乱或我做错了什么，请见谅。

标签： htmlcssbootstrap-4

Answer 1

height: 60%你的figure将是 0，因为它必须是父元素的 60%，并且你的父元素的高度为 0。尝试以 px 为单位定义父元素高度。例如，body或任何其他父标签。