<分区>
<分区>
如何将这些按钮准确地保留在背景图片中的框上？当您调整窗口/浏览器的大小时，它们的位置/大小会发生变化，并且它们不再适合背景图像框。
html, body {
margin: 0;
}
.Div1 {
background-image: url("https://imgur.com/7NQ3IOt.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
height: 76.1vw;
}
.Div2 {
background-image: url("https://imgur.com/CjVMSqG.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
height: 169vw;
}
.Btns {
position: absolute;
font-size: 1.9vw;
left: 17.4vw;
width: 26.3vw;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="Div1">
<button class="Btns" style="top: 4.8vw">Button 1</button>
</div>
<div class="Div2">
<button class="Btns" style="top: 4vw">Button 1</button>
</div>
</body>
</html>最佳答案
我认为这里的问题在于按钮的尺寸和默认填充、边框和浏览器特定样式。我通过一些手动调整用计算值编辑了 fiddle :
简而言之，padding也要以vw为单位，并设置-webkit-appearance: none;。
你可以在这里看到一个 CodePen:
https://codepen.io/elujambio/pen/EQQOgK
html, body {
margin: 0;
}
.Div1 {
background-image: url("https://imgur.com/7NQ3IOt.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
height: 76.1vw;
}
.Div2 {
background-image: url("https://imgur.com/CjVMSqG.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
height: 169vw;
}
.Btns {
position: absolute;
font-size: 1.8vw;
box-sizing: border-box;
padding: .25vw 0;
left: 18vw;
width: 26.75vw;
-webkit-appearance: none;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="Div1">
<button class="Btns" style="top: 4.8vw">Button 1</button>
</div>
<div class="Div2">
<button class="Btns" style="top: 4vw">Button 1</button>
</div>
</body>
</html>关于HTML Css 位置绝对不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48869725/