我在頁面上放置了影像（2400x1600），但其中一部分被截斷：
影像應該完全可見：
這是我的CSS代碼：
.background-property {
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center !important;
width: 100%;
height: 100vh;
margin: auto;
}
如果您能解釋為什么它失敗以及可能的解決方案是什么，將不勝感激？
PS HTML 代碼：
<div class="hero-area-l1 position-relative" style="background: url(image/landing-1/new.png);">
<div class="container">
<div class="row">
<div class="col-xxl-5 col-xl-6 col-lg-6 col-md-10 order-lg-1 order-1" >
<div class="content">
<h2>Are you ready</h2>
<p>With lots of unique blocks, you can easily build a page without coding. Build your next website
fast.</p>
<div class="l1-create-acc-btn">
<a href="#" class="btn btn-style-02">Create a free account <i class="fas fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
uj5u.com熱心網友回復：
我建議玩弄background-position: top, bottom, center. 因為您的背景影像似乎在 y 軸上關閉。我會嘗試background-position: bottom;
body {
background: url('https://i.ibb.co/52RzfxG/new-1.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
body {
margin: 0;
color: Yellow;
}
h2 {
margin-top: 0;
}<body>
<div class="hero-area-l1 position-relative">
<div class="container">
<div class="row">
<div class="col-xxl-5 col-xl-6 col-lg-6 col-md-10 order-lg-1 order-1" >
<div class="content">
<h2>Are you ready</h2>
<p>With lots of unique blocks, you can easily build a page without coding. Build your next website
fast.</p>
<div class="l1-create-acc-btn">
<a href="#" class="btn btn-style-02">Create a free account <i class="fas fa-angle-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>uj5u.com熱心網友回復：
您可以通過設定來實作這一點 background-size: 100% 100%;
.background-property {
background-size: 100% 100%;
background-repeat: no-repeat !important;
background-position: center !important;
width: 100%;
height: 100vh;
margin: auto;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/405431.html
標籤：