css div的背景图像在背景位置不是0 0时立即消失

np8igboo 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(165)

我有一个div，它有一个背景图像（具体来说是一个sprite表），我想稍后在动画中使用它，但由于某种原因，一旦div的背景位置不是0 0，它就完全消失了。下面是上述div的CSS代码：（没有显示，因为背景位置是512 px和256 px;原始图像为1792 x1792 px）

#Shotgun {
    width: 256px;
    height: 256px;
    background: url(./assets/img/Weapons.png) 512px 256px;
    position: relative;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
}

HTML代码中的div不包含任何文本或其他内容。当我将背景更改为

background: url(./assets/img/Weapons.png) 0 0;

它确实显示了，但因为我想使用图像的不同部分，它不是我想要的。
Div应该使用背景图像的特定部分，但一旦背景位置不是0 0，背景就会消失。

css

来源：https://stackoverflow.com/questions/76539971/background-image-of-div-disapears-as-soon-as-background-position-isnt-0-0

1条答案

按热度按时间

sh7euo9m1#

下面是CSS中背景图片的处理。当你设置背景位置时，这有点像告诉浏览器从哪里开始绘制你的图像。这就像你有一张大Map，告诉它从哪里开始。
因此，在您的情况下，如果您有一个1792x1792px的图像，并且您将背景设置为512px 256px，您基本上是在告诉浏览器“嘿，从图像的右上角开始从512px开始绘制，并从左上角向下绘制256px。
这是个意外你的div是256x256px，对吧？因此，当浏览器从该点开始绘制时，它只会覆盖256x256px的区域。但是，如果图像的该区域是空的或透明的，则看起来根本没有背景。
只要仔细检查你是否从正确的点开始。有时，很容易混淆X和Y坐标。我建议使用图形编辑器来找出正确的坐标。
另外，不要使用背景，而是考虑分别使用背景图像和背景位置，如：

#Shotgun {
      ...
      background-image: url(./assets/img/Weapons.png);
      background-position: 512px 256px;
      ...
  }

这让你对你的风格有更多的控制和清晰度。希望这能让你解脱伙计。

赞(0）回复(0）举报 2023-06-25

我来回答

css div的背景图像在背景位置不是0 0时立即消失

1条答案

相关问题

热门标签

最新问答