Question

这是我在这里的第一篇帖子，我是CSS新手。我试图获得一个尺寸为32 x 16的Mario精灵。当我打开html文件时，没有任何内容出现。我尝试检查元素html但我看不到div。

CSS

#stillMario {
    width: 16px;
    height: 32px;
    margin: auto;
    background-image: url("sprites/still.png");
    position:absolute;
    left: 0px;
    top: 0px;
    bottom:0px;
}

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Super Mario</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>
    </head>
    
    <body>
        <div id="stillMario"></div>
        
        <script src="myjs.js"></script>
    </body>
</html>

Answer 1

使用<img>元素而不是设置<div>的背景。
示例：<img src=""sprites/still.png"" alt="Mario" height="32" width="16">

Answer 2

如果您确定文件夹'sprites'位于项目的根目录中，那么请尝试使用'../'作为前缀，然后先尝试不使用绝对定位。如果有效，则按如下方式再次返回定位;

#stillMario {
  width: 16px;
  height: 32px;
  margin: auto;
  background-image: url("../sprites/still.png");
  //position:absolute;
  //left: 0px;
  //top: 0px;
  //bottom:0px;
}

让我知道它是否有效

为什么我的背景图片不会出现在CSS中？

2 个答案: