Question

如何将这些按钮完全保留在背景图像的方框中？当您调整窗口/浏览器的大小时，它们的位置/大小会发生变化，并且它们不再适合背景图像框。

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>

Answer 1

我认为这里的问题是按钮的测量和默认填充，边框和浏览器特定样式。我用一些手动调整编辑了计算值的小提琴：

简而言之，填充也应该是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位置绝对不起作用

1 个答案: