我正在开发一个小的HTML页面，其中包括页面上的一些按钮。我想添加一个背景图像到这些按钮，并让背景图像继续在最后一个离开（加上他们之间的空白）。
这是我在Photoshop中制作的一个快速模型，说明了我的意思（模型显示在顶部，背景显示在底部）：
如果我要编写伪代码来解决这个问题，可能是：
if Button and Image intersect:
Button.Background_image = Image_intersection
我为这个HTML页面编写的HTML和CSS代码是：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Main Document</title>
<style>
*{
background: lightblue;
}
p{
color:Black;
}
button{
color:red;
padding: 30px;
margin-right: 50px;
border-radius: 40px;
border:2px black solid;
background-image: url('images/im.jpg')
width:50%
height:50%
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi, harum.</p>
<div class="buttons">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
</div>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id quaerat dignissimos aperiam incidunt molestias officiis ullam iusto consequuntur, obcaecati impedit nemo nesciunt ratione similique cumque? Deserunt reprehenderit pariatur officiis nisi natus. Cupiditate culpa mollitia ad beatae voluptates similique quos obcaecati magnam saepe commodi quae, facilis a assumenda suscipit ab? Aut?</p>
</body>
</html>然而，这段HTML代码并没有完成我所设定的工作（如模型所示）。我怎么能避开这个？
最佳答案
您可以根据按钮的数量使用background-position属性。（全屏查看正确位置）
编辑：对于不同数量的按钮，您可能需要使用如下所示的JavaScript：
let btns = document.querySelectorAll(".buttons button")
, step = 100/(btns.length - 1)
btns.forEach((btn, idx) => {
btn.style.backgroundPositionX = idx*step + "%";
btn.style.backgroundPositionY = "50%";
})* {
background: lightblue;
}
p {
color: Black;
}
button {
color: red;
padding: 30px;
margin-right: 50px;
border-radius: 40px;
border: 2px black solid;
background: url(https://www.sarahsflowers.co.uk/wpcms/wp-content/uploads/2013/10/Orange-Silk-Gerbera-Wedding-Flower-Sample1.jpg) no-repeat center;
background-position: 0% 50%;
}<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quasi, harum.</p>
<div class="buttons">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
<button>Button 6</button>
<button>Button 7</button>
<button>Button 8</button>
</div>
<br/>Image: <br/>
<img src="https://www.sarahsflowers.co.uk/wpcms/wp-content/uploads/2013/10/Orange-Silk-Gerbera-Wedding-Flower-Sample1.jpg" height="200"/>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Id quaerat dignissimos aperiam incidunt molestias officiis ullam iusto consequuntur, obcaecati impedit nemo nesciunt ratione similique cumque? Deserunt reprehenderit pariatur officiis nisi natus.
Cupiditate culpa mollitia ad beatae voluptates similique quos obcaecati magnam saepe commodi quae, facilis a assumenda suscipit ab? Aut?</p>关于javascript - 如何将背景图像应用到某些HTML按钮，并使图像从上次停止的地方继续播放？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56714709/