Html- 我无法将我的图片粘贴到页面上的固定点

Question

所以我在我的 css 中创建了我的 div，并将它们链接到我的索引文件。所以问题是每当我缩小我的页面(使用滚轮)时，图像向左移动但背景停留在页面中间。我想知道如何使图像在页面上具有固定位置，同时在缩小页面时不影响它。

这是一段对图像没有影响的代码(这段代码的问题是我希望将一些图片放置在特定位置(通过使用像素)):

#top-left
{
    width:200px;
    height:200px;
    border-right: thick hotpink solid;
    border-bottom: thick hotpink solid;
}

这是一段对图像有影响的代码:

#top-left2
{
    width:200px;
    height:200px;
    position:absolute; 
    left:464px;
    top: 354px;
    border-right: thick hotpink solid;
    border-bottom: thick hotpink solid;
}

Answer 1

如果你想让背景图片不滚动并固定，试试这个:

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

您可以在这里引用:https://css-tricks.com/perfect-full-page-background-image/

否则，如果您想对任何 div 执行此操作，您可以应用固定定位:

#top-left2
{
    width:400px;
    height:200px;
    position:fixed; 
    z-index: 500;
    left:464px;
    top: 0;
    border-right: thick hotpink solid;
    border-bottom: thick hotpink solid;
    background-color: yellow;
}