CSS - 根据大小更改背景定位

我有一个带有背景图像的div部分 . div部分具有可变宽度但固定高度 . 背景图像与div部分始终相同,位于底部中心 .

footer{
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  height: 300px;
  width: 100%;
  color: #fff;
  background-color: #7f7f7f;
}

footer::before{
  content: "";
  position: absolute;
  top: 0px;
  height: 100%;
  width: 100%;
  background-image: url("./img.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: bottom center;
  opacity: 0.4;
}

如果现在div部分变为宽度,则背景图像变为高度并在顶部切割 . 如果图像变为高度,我想将位置更改为顶部中心,从而切割图像的底部 . 是否有解决方案来实现这种效果?

回答(1)

2 years ago

您是否尝试将背景大小从100%自动更改为'包含',如下所示:

background-size: contain;