CSS - 根据大小更改背景定位-Java 学习之路

我有一个带有背景图像的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 回答

0
您是否尝试将背景大小从100％自动更改为'包含'，如下所示：
```
background-size: contain;
```
回复于 2023-10-03T23:14:07+00:00

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

1 回答

相关问题