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

尝试将背景放在身体上：

https://jsfiddle.net/6xj4fjny/

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

Answer 2

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

Answer 3

如果您希望图片浮动在内容上，则应使用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文件中所做的那样。）;）

背景重复不使用Div标记

3 个答案: