图片下方出现的文字答案

【问题标题】：Text appearing under image图片下方出现的文字
【发布时间】：2014-07-15 19:05:02
【问题描述】：

所以我正在学习 HTML 和 CSS，我有一张图片作为背景。但是当我尝试在其上添加文本时，它会覆盖它。这是我的 CSS

* {
    padding: 0;
    margin: 0 auto;
}
.img{
    z-index: 2;
    width: 100%;
    height: 100%;
    background-image: url('126.42.jpg');
    position: fixed;
}
body{
    z-index: 99;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

还有我的 HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <div class="img"></div>
    <h1>test</h1>
    <h1>test</h1>
    <h1>test</h1>
</body>
</html>

这是一个小提琴http://jsfiddle.net/ATS7V/

【问题讨论】：

标签： html css image background

【解决方案1】：

您的z-index 属性将图像设置在其他所有内容之上。

改成：

z-index: -1;

http://jsfiddle.net/ATS7V/1/

【讨论】：

【解决方案2】：

我假设当你说文本被覆盖时，你希望它被显示出来。

请执行以下操作：

h1{
 position: relative;
    z-index: 1;
}

<div class="img">
 <h1>test</h1>
<h1>test</h1>
<h1>test</h1>   

</div>

这里是 JSFiddle。 http://jsfiddle.net/ATS7V/4/

【讨论】：

【解决方案3】：

只需添加

background-image: url('http://s29.postimg.org/lltw25n07/126_42.jpg');
background-repeat:no-repeat;
background-attachment:fixed;

到你的身体

body{
z-index: 99;
width: 100%;
height: 100%;
background-image: url('http://s29.postimg.org/lltw25n07/126_42.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
}

http://jsfiddle.net/jcsl/ATS7V/12/

【讨论】：

那我怎么让它成为一个固定的背景呢？
固定背景是什么意思？
固定背景。这样我就可以滚动并且它不会随着文本移动。
好吧抱歉，没听懂。使用背景重复：不重复；背景附件：固定； jsfiddle.net/jcsl/ATS7V/10