Question

页面的背景图像不必要地调整大小。如何使HTML元素不受大小调整的影响（在浏览器中缩放）。

添加：

resize: none;

没有成功。我仍然希望页面的其余部分在缩放条件下正常运行。理想情况下，我只想在缩放条件下调整基本页面的大小，同时保持其结构不变。当前，背景图片和容器div在缩放下无法对齐。

<body>
  <div class='container'>
   <form id='survey-form'>
    <ul>
      <li>a</li>
      <li>a</li>
      <li>a</li>
      <li>a</li>
    </ul>
   </form>
  </div>
</body>

<style>
body {
background-image:
url(https://images.unsplash.com/photo-1541233349642-6e425fe6190e?ixlib=rb-        1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);

background-repeat: no-repeat;
background-position: center;
margin: 0 auto;
background-attachment: fixed;

color: #ababab;
}
.container {
width: 400px;
padding: 30 20 20 20;
 margin: 0px auto 10px auto;
background: black;

display: flex;
flex-direction: column;
}
.form-group{
display: flex;
flex-direction: column;
margin: 20 120 20 0;
width: 100%;
}
</style>

调整页面大小时，保持背景图片的大小不变

0 个答案: