所以我试图使用css和bootstrap 4编写以下布局:
基本上DIV1和DIV2是背景的一部分,应该始终保持原样,即DIV1总是在右上角,DIV2右下角。
我用以下方法实现了:
#DIV1 {
position: relative;
}
#DIV1 img {
position: absolute;
top: 50px;
right: 25px;
width: 20%;
height: auto;
}
#DIV2 {
position: relative;
}
#DIV2 img {
position: fixed;
bottom:-150px;
right:-50px;
width: 40%;
height: auto;
}
但我无法弄清楚如何使DIV3不属于背景,如果需要,应该覆盖DIV1和DIV2。 DIV3应垂直和水平居中,并应具有响应性,即应在较小的屏幕上缩小。我不确定如何实现这一点,这是引导网格的用例吗?我应该将DIV1 DIV2和DIV3放在网格中吗?
这个解决方案是您正在寻找的吗?
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
img {
width: 100%;
height: 100%;
}
#DIV1 {
position: absolute;
top: 0;
right: 0;
width: 80px;
height: 40%;
}
#DIV2 {
position: absolute;
bottom: 0;
right: 0;
width: 120px;
height: 40%;
}
#DIV3 {
position: absolute;
left: 0;
right: 140px;
top: 0;
bottom: 0;
margin: auto;
width: 35%;
height: 50%;
}
<div id="DIV1">
<img src="https://picsum.photos/300/300/?random">
</div>
<div id="DIV2">
<img src="https://picsum.photos/300/300/?random">
</div>
<div id="DIV3">
<img src="https://picsum.photos/300/300/?random">
</div>
使用
position: absolute;
margin-left: 50%;
margin-top: 50%;
transform: translate(-50%, -50%);