背景图像 css 不工作的高度和宽度属性答案

【问题标题】：Backroung image css not work height and width properties背景图像 css 不工作的高度和宽度属性
【发布时间】：2022-01-29 03:11:13
【问题描述】：

我有一个静态图像，但现在我需要将它传递给 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>

结果：

【问题讨论】：

` .img-latam { background-image: url("assets/img/latam.png");背景尺寸：100%；宽度：152px；高度：59px； }`

【解决方案1】：

  .img-latam {
background-image: url("assets/img/latam.png");
width: 152px;
height: 59px;
background-size: 100%;

}

当你使用 background-size 属性时，宽度和高度会起作用

【讨论】：

【解决方案2】：

你必须用 CSS 编写：

.img-latam{
  background-image:url("assets/img/latam.png");
  background-size: 100%; 
  width: 152px; 
  height: 59px;
}

【讨论】：

【解决方案3】：

您可以使用 background-size 来指定您希望背景图像如何填充容器。我想你想要的是这样的：

  .img-latam {
    background-size: cover;
  }

您可以通过示例here 阅读更多关于您可以为背景大小传递的不同值的信息。

【讨论】：