Question

所以我正在学习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/

Answer 1

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

请执行以下操作：

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/

Answer 2

添加

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/

Answer 3

您的z-index媒体资源正在将图片设置在其他所有内容之上。

将其更改为：

z-index: -1;

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

出现在图像下的文字

3 个答案: