gpt4 book ai didi

html - 将滚动条添加到背景图像

转载 作者:行者123 更新时间:2023-11-28 17:07:17 25 4
gpt4 key购买 nike

如何向该图像背景添加滚动条?

<!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>

我把图片放在背景中的原因是我需要把按钮和其他元素放在它上面。还有其他方法可以实现吗?

最佳答案

你原来问题的答案是:

为什么会有人想要背景滚动条?背景只是背景。如果它是一个重要的内容,那么它不应该在后台。把它带到前面,让它成为标准img元素或标准元素的背景。

如果我们转换您的评论:

If you add it as an <img> then you cant put buttons etc on top of that image. If you add it as a background, then you can add elements on top of the image

一个问题:

How to put buttons and other elements on top of an image?

那么答案就是:有很多方法可以做到。一种方法是将图像放在 div 中盒子是position: relative然后将按钮(或您想要的任何元素)添加到框中并使其成为 position: absolute .然后你可以将卷轴添加到 div盒子。这是一个演示:

.container {
position: relative;
width: 200px;
height: 200px;
overflow: scroll;
}

.container button {
position: absolute;
top: 50px;
left: 50px;
}
<div class="container">
<img src="https://imgur.com/CahbpxJ.jpg" />
<button type="button">Click Me</button>
</div>

关于html - 将滚动条添加到背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48700880/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com