html - 背景重复不适用于 Div 标签

Question

Link to jsfiddle.由于某些原因，左上角的图片不会随着页面向下滚动。但是，我放入的第二个好像后面有一个。

我想在我的程序中做的是，即使在将边框和边距设置为 0px 后，仍保留左上角的图片，但也向下滚动。

我见过几种不同的写法，但它似乎对我不起作用。

HTML:

<div class="home" style="position: absolute;">
  <a href="hub.html">
   <!--<img src="https://puu.sh/vyv4h/c23b05c784.png">-->
   </a>
</div> 

CSS:

.home {
  top: 0px;
  left: 0px;

  background-image: url('https://puu.sh/vyv4h/c23b05c784.png');
  background-repeat: no-repeat;
  background-attachment: fixed;

  position: absolute;
  z-index: 10;
}

谁知道我的语法错在哪里？

编辑:尽管我会说这种语法确实有效。问题是我无法让它与我当前的代码一起工作。

body  {
    background-image: url('https://puu.sh/vyv4h/c23b05c784.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
}

EDIT2:对于不断的编辑感到抱歉。我也试过这个:

HTML

<img id="home" src="images/home_iconv2.png">

CSS:

#home {
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Answer 1

如果你想让图像 float 在内容上，你应该使用 position: fixed 属性而不是 position: absolute 你已经在 HTML 中设置了这两个 ...

<div class="home" style="position: absolute;"> // <- Here
    <a href="hub.html">
   <img src="https://puu.sh/vyv4h/c23b05c784.png"></a>
</div> 

在 CSS 中

.home {
    top: 0px;
    left: 0px;
    [...]   
    position: absolute; // <- Here
    z-index: 10;
}

我的建议是避免编写内联 CSS(就像您在 HTML 文件中所做的那样。);)