我有一個部分在其中添加了背景影像，現在我希望此背景影像在如下所示的所有設備中保持在相同位置
這是我迄今為止嘗試過的
HTML
<div class="main-block">
<div class="main-block_inner">
<nav class="navbar navbar-expand-lg navbar-light static-top">
<div class="container">
<a class="navbar-brand" href="https://www.capgemini.com/"> My app </a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="py-5 text-center container">
<h1 class="headers">Some headers gooes here </h1>
<div class="row py-lg-5 content">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
<p>
<a href="#" class="btn btn-primary my-2">Main call to action</a>
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
</p>
</div>
</div>
</div>
</div>
</div>
這里的css
.main-block{
background-image: url(https://i.ibb.co/B6xfnvz/falka-1.png);
background-repeat: no-repeat;
background-position: 265px 0px;
background-size: 1085px 1016px;
height: 1080px;
}
.main-block_inner{
max-width: 816px;
width: 100%;
height: 1080px;
padding-right: var(--bs-gutter-x, .75rem);
padding-left: var(--bs-gutter-x, .75rem);
margin-right: auto;
margin-left: auto;
margin-top: 30px;
}
.content{
border: 2px solid red;
}
.headers{
margin-bottom: 120px;
}
現場演示：現場演示
我需要做什么才能得到我想要的？
uj5u.com熱心網友回復：
添加 background-attachment: fixed;
uj5u.com熱心網友回復：
改變這個：
background-position: 265px 0px;
進入這個：
background-position: center center;
或者，如果你想花哨：
background-position: calc(50% 1px) calc(50% 1px);
根據您的口味/愿望更改像素。
uj5u.com熱心網友回復：
你應該做
'位置：固定；' 如果您想相對于提到的設備進行固定，則使用上面提到的其他代碼或“位置：相對”。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/362745.html