0

我不知道为什么我的容器显示在屏幕底部。我知道这有两个可能的问题。最好的方法是：如何使蒙版应用于背景图像，所以我可以将图像 url 粘贴到背景上，然后我可以在上面使用代码。另一个问题是：如何在没有绝对定位的情况下使容器 div 显示在背景 div 之上。对不起，如果这令人困惑。这是我的代码

<html>
<head>
<title> 
Singapore - gallery
</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta name="viewport" content="width=device-width, initial scale=1.0">
<style>
*  {
  margin: 0;
  padding: 0;
}
#background img {
  width: 100%;
  -webkit-mask-image: 
  -webkit-gradient(linear, left top, left bottom, 
  from(rgba(0,0,0,1)), to(rgba(0,0,0,0))); 
  z-index: -1; 
}

#container {
  width: 1000px;
  background-color: #fff;
  margin: 0 auto;
  border: 3px solid #eee; 
}

</style>
</head>
<body>
<div id="background"> <img src="gallery.jpg" />
<div id="container">
<h1> Singapore Gallery </h1>  
</div>
</div>
</body>
4

1 回答 1

4

逻辑是这样的

制作父 divposition: relative;并将覆盖 div 制作为position: absolute;并使用top: 0;

所以在这里你使用的img标签肯定是没有定位的，所以你要做的是

我假设你想覆盖h1你的imgso 使用position: relativefor #background，而不是使用position: absolute;forimg和 make it top: 0;and z-index: 1; /*Optional*/，然后 make #containerasposition: absolute;和使用top: 0;andz-index: 999; /*Compulsory*/

于 2012-11-18T20:00:35.257 回答