Question

我尝试使用SASS和HTML在另一个图像上放置一个小图像。我是编码的初学者，所以我不确定我做错了什么，但对其他人来说可能是显而易见的。

我试图将小图片标记为＆＃34; mklogo＆＃34;超越迷宫＆＃34;但是，我看到的唯一图像就是＆＃34;迷宫＆＃34;图像。

有人可以帮我一把吗？

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>Maze Assignment</title>
        <script src="node_modules/jquery/dist/jquery.min.js"></script>
        <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script src="js/main.js"></script>
</head> 
<body>
    <div id="mklogo"></div>
</body>
</html>

这是.scss文件下的SASS。

html, body{
    background: url("../images/maze.png") no-repeat center center fixed;
    background-size: 100% 100%;
    image-rendering: pixelated;
    image-rendering:-moz-crisp-edges;

}

#mklogo{
    background: url("../images/mkLogo.png");
    width:5vw;
    height:5vw;
    position:absolute;
}

真的很感激。

Answer 1

您已绝对定位#mklogo，这会将其从文档流中删除。除非您在body上设置高度和宽度，否则body将不会展开以适合#mklogo。尝试在body上设置明确的尺寸（例如100vw和100vh），这应该可行。

此外，仅在body上设置背景图片，而不是html。

使用SASS在背景上发布图像

1 个答案: