我正在开发一个基于 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 根本不会显示。如果我将图形的位置更改为绝对位置,则会显示它,但联系表格会与它重叠。 这是我在这里的第一篇文章,如果有点乱或者我做错了什么,请见谅。
最佳答案
height: 60%
您的 figure
将为 0,因为它必须是父元素的 60%,而您的父元素的高度为 0。尝试以像素为单位定义父元素高度。例如,body
或任何其他父标签。
关于html - Bootstrap CSS 固定 bg 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58154381/