简体   繁体   English

后台重复不适用于Div标签

[英]Background-repeat Not Working With Div tag

Link to jsfiddle. 链接到jsfiddle。 For some reason, the picture at the top left will not scroll down with the page. 由于某些原因,左上方的图片将不会随页面向下滚动。 However, it looks like one is behind the second one I put in. 但是,看起来好像一个比我输入的第二个落后。

What I'm trying to do in my program is keep that picture that the top left even after setting the border and margin to 0px, but also scroll down. 我要在程序中执行的操作是,即使将边框和边距设置为0px,也要保持左上角的图片,但还要向下滚动。

I've seen a few different ways of writing this, but it doesn't seem to work for me. 我已经看到了几种不同的编写方式,但是它似乎不适用于我。

HTML: HTML:

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

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

Anyone know how my syntax is wrong? 有人知道我的语法错误吗?

EDIT: I will say though that this syntax does work. 编辑:我会说虽然这种语法确实有效。 Problem is that I cannot get it to work with how my code is currently. 问题是我无法使其与我的代码的当前状态一起使用。

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

EDIT2: Sorry for the constant edits. EDIT2:对常量编辑感到抱歉。 I've also tried this: 我也尝试过这个:

HTML HTML

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

CSS: CSS:

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

Try putting the background on body: 尝试将背景放在主体上:

https://jsfiddle.net/6xj4fjny/ https://jsfiddle.net/6xj4fjny/

body {
  background-image: url('https://puu.sh/vyv4h/c23b05c784.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
}
<div style="position:fixed">
    //have a try
</div>

If you want the image to float over the content, you should use position: fixed attribute instead of position: absolute you've setted both in HTML ... 如果您希望图像在内容上浮动,则应使用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> 

And in the CSS 在CSS中

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

My advice would be avoiding writting inline CSS (like you did on the HTML file.) ;) 我的建议是避免编写内联CSS(就像您在HTML文件上所做的那样。);)

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM