0

これは非常に簡単なはずです、そして私はこれについていくつかの研究をしました。ここ、ここ、ここ、その他の場所からコードをつなぎ合わせましたが、これを機能させることができません。

3つの.pngが重なり合ったWebページがあります。上の2つは可変サイズで、ページの100％です。上の方には穴があり（真ん中は透明です）、Javascriptを使用して真ん中が消えて下の方が表示されます。上位2つの.pngとJavascriptは完全に機能しています。

下の画像を正確な中央、垂直方向、水平方向に配置し、ページサイズに比例させたいと思います。中央に配置することも、比例させることもできますが、両方を使用することはできません。下の画像を背景として配置することはできません。背景が適切な色ではないか、タイル状になっているためです。

いくつかのコードのサンプルを次に示します。

HTML：

<body>  
        <div >
    <p0 id="face" ><img src="face2.png"; class='face'> </p0>
</div>
        <p1 id="circuit" > <img src= 'circuit.png' width = '100%' height = '100%' /> </p1>
        <p2 id="hole" ><img src="hole.png" width='100%' height = '100%' /> </p2>
</body>

CSS：

p0{ 
width: 50%;/*I can't set the height to 50% because it is a different size than the width*/
center
z-index:1;
position: absolute; 
}

p1{
z-index: 2;
width: 100%;
padding:0;
margin: 0;
height:100%;
position: absolute; 
}

p2{
z-index:3;
width: 100%;
padding:0;
margin: 0;
height:100%;
position: absolute; 
}
4

1 に答える 1

0

必要なものをすべて、次のようなdivに集中させます。

   .div{
     width: 100%;
     position: relative; // or absolute
     text-align: center;
     text-align: -moz-center;
     text-align: -webkit-center;
     }

ここにリンクjsfiddleがあります

ここに完全なCSSがあります：質問が述べたように、両方の画像は互いの正確な中心で異なるサイズです、

.parent{
 width: 100%;
 position:  absolute;
 text-aligh: -align: center;
 text-align: -moz-center;
 text-align: -webkit-center;

 }

.center1{

height:120px;
width: 275px;    
background-image: url("http://www.google.com/images/srpr/logo3w.png");
}

.center2{       
height: 100px;
width: 200px;
 background-image: url("http://www.google.com/logos/2012/turing-doodle-static.jpg");
}

HTML：

     <div class="parent" style="z-index: 1;">
         <div class="center1"></div> 
     </div>
     <div class="parent" style="z-index: 10;">
         <div class="center2"></div> 
     </div>
于 2012-06-24T21:39:28.637 に答える