0

コンテナーが画面の下部に表示される理由がわかりません。これには2つの質問が考えられることを知っています。最良の方法は、マスクを背景画像に適用する方法です。画像の URL を背景に貼り付けて、その上にコードをいじることができます。もう1つの質問は、絶対配置なしで背景divの上にconatiner 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ますimgので、position: relativeforを使用して forを#background使用してand を作成し、後で make asを使用してandを使用しますposition: absolute;imgtop: 0;z-index: 1; /*Optional*/#containerposition: absolute;top: 0;z-index: 999; /*Compulsory*/

于 2012-11-18T20:00:35.257 に答える