我有一個靜態影像，但現在我需要將它傳遞給 css。但是，當在 css 中傳遞帶有 backround 屬性的影像時，它的形狀與原始代碼的形狀不同，而且看起來很亂。如果我給它提供與第一個代碼相同的尺寸，為什么會發生這種情況？
原始html作品：
<a href="{{url}}" target="_blank"><img src="assets/img/latam.png" width="152" height="59" alt="" /></a>
新的CSS：
.img-latam {
background-image: url("assets/img/latam.png");
width: 152px;
height: 59px;
}
新的 html
<a href="{{url}}" target="_blank"><img class="img-latam" alt="" /></a>
結果：
uj5u.com熱心網友回復：
.img-latam {
background-image: url("assets/img/latam.png");
width: 152px;
height: 59px;
background-size: 100%;
}
當您使用 background-size 屬性時，寬度和高度將起作用
uj5u.com熱心網友回復：
您可以使用 background-size 來指定您希望背景影像如何填充容器。我想你想要的是這樣的：
.img-latam {
background-size: cover;
}
您可以通過此處的示例閱讀更多關于您可以為背景大小傳遞的不同值的資訊。
uj5u.com熱心網友回復：
你必須用 CSS
.img-latam{ background-image:url("assets/img/latam.png");background-size: 100%; width: 152px; height: 59px;
}`寫
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/422198.html
標籤：
上一篇：如何水平對齊這兩個日期欄位？