我有這樣的 HTML 和 CSS：
.item {
width: 100%;
height: 768px;
background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
background-repeat: no-repeat;
background-size: 100% auto;
border-radius: 50px 50px;
}<div class='item'></div>當我調整瀏覽器的大小時，底部邊框半徑不起作用。
uj5u.com熱心網友回復：
更改background-size: cover;，您可以添加background-position: center;以將影像居中。
.item {
width: 100%;
height: 768px;
background-image: url("https://a0.muscache.com/im/pictures/f1502649-e034-40ab-9fed-7992b7d550c6.jpg?im_w=1200");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
border-radius:50px 50px;
} <div class='item'></div>uj5u.com熱心網友回復：
正如其他答案中所述，您可能想要使用background-size: cover;. 它將拉伸影像以覆寫 div 的整個區域（因此border-radius將可見）。
但是，由于在此更改后可以裁剪影像（特別是在它沒有與 div 區域相同的縱橫比的情況下），因此可能還需要根據需要使用background-position定位背景影像（通過默認它與左上角對齊）。
最有可能的是，將它居中會得到很好的結果，但可能性是無窮無盡的 ;)
background-size: cover;
background-position: center;
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/385341.html