Question

如何将滚动条添加到此图像背景？

<!DOCTYPE html>
<html>
<head>
    <title>VBS</title>
    <style>
        body {
            background-image: url(https://imgur.com/CahbpxJ.jpg);
            min-height: 100%;
            background-size: cover;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
</body>
</html>

我将图像放在背景中的原因是我需要将按钮和其他元素放在它上面。还有另一种方法可以实现吗？

Answer 1

原始问题的答案是：

为什么人们想要一个滚动条作为背景？背景只是一个背景。如果它是一个重要的内容，那么它不应该在后台。将它带到前面，使其成为标准元素的标准img元素或背景。

如果我们转换您的评论：

如果您将其添加为<img>，则无法将按钮等放在该图像的顶部。如果将其添加为背景，则可以在图像顶部添加元素

问题：

如何将按钮和其他元素放在图像上？

然后答案是：有很多方法可以做到这一点。一种方法是将图像放在div的{{1}}框中，然后将按钮（或任何您想要的元素）添加到框中并将其设为position: relative。然后，您可以将滚动添加到position: absolute框。这是一个演示：

＆＃13;

div

＆＃13;

.container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: scroll;
}

.container button {
  position: absolute;
  top: 50px;
  left: 50px;
}

＆＃13;

将滚动条添加到背景图像

1 个答案: