gpt4 book ai didi

javascript - 固定按钮在图像上的位置

转载 作者:行者123 更新时间:2023-11-30 14:35:42 27 4
gpt4 key购买 nike

我正在尝试在图像中的特定位置修复一个按钮。有没有办法将按钮与图像的特定部分合并?这是我到目前为止所拥有的 I have the button exactly where I want it but when the browser is stretched or zoomed in, the button doesn't stay.

这是我所拥有的 JSFiddle https://jsfiddle.net/vkfLywna/1/

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
position: absolute;
width: 100%;
max-width: 400px;
}

.container img {
width: 200%;
height: auto;
}

.container .btn {
position: relative;
top: -330px;
left: 96px;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #555;
color: white;
font-size: 6px;
padding: 4px 10spx;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}

.container .btn:hover {
background-color: black;
}
</style>
</head>
<body>

<div class="container">
<img src="doc.png.png" alt="img" style="width:100%">
<button class="btn">Button</button>
</div>

</body>
</html>

最佳答案

div 包裹 imgbutton 并相应地定位它们:

.img-container {
border: solid red 1px;
display: inline-block;
position: relative;
}

.img-container button {
position: absolute;
top: 50px;
left: 50px;
}
<div class="img-container">
<img src="http://via.placeholder.com/350x150">
<button>Click here</button>
</div>

关于javascript - 固定按钮在图像上的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50453442/

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