Question

我有一个带有背景图像的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部分变为宽度，则背景图像变为高度并在顶部被剪切。如果图像变高，我想将位置更改为顶部居中，然后剪切图像的底部。有解决方案可以达到这种效果吗？

Answer 1

您是否尝试将背景尺寸从100％自动更改为“包含”，如下所示：

fg; python my_program.py

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

1 个答案: