Background-repeat 不使用 Div 标签答案

【问题标题】：Background-repeat Not Working With Div tagBackground-repeat 不使用 Div 标签
【发布时间】：2017-04-28 10:41:07
【问题描述】：

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;
}

【问题讨论】：

标签： html css image background

【解决方案1】：

如果您希望图像浮在内容上，您应该使用position: fixed 属性而不是您在 HTML 中设置的position: absolute ...

<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 文件中所做的那样。）;)

【讨论】：

做到了。非常感谢您回答我的问题！
不客气！内联 css 总是接管在工作表中声明的 css。只有!important 可以覆盖内联css，所以我们不推荐使用它。
我会记住你关于编写内联 CSS 的建议。当 CSS 无法与我的 HTML 文档正确通信时，我已经做了几次。我对两者都是新手，所以我写一个错误的情况并不少见，把一切都搞砸了。 ://

【解决方案2】：

尝试将背景放在身体上：

https://jsfiddle.net/6xj4fjny/

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

【讨论】：

对不起。我做了一个编辑说它不起作用。我不应该这么匆忙发布我的问题。

【解决方案3】：

<div style="position:fixed">
    //have a try
</div>

【讨论】：