1

ブラウザーの乗車側に高さいっぱい (グラデーションがかかっている) に配置された静止画像と、左側にテキストのブロックを含むページを作成しました。ブラウザー ウィンドウに合わせて画像のサイズを変更したいのですが、画像がテキストの後ろに隠れたり、テキストよりも小さくなったりすることは望ましくありません。ボディに最小幅と最小高さ (1024x768 など) を設定しても、問題は解決しません。私は何か間違ったことをしていますか？これを行うにはどうすればよいですか？

前もって感謝します！

これが私のコードです：

<style type="text/css">
html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    min-width: 1024px;
    min-height: 768px;
}
#background-image {
    position: absolute;
    right: 0;
    top: 0; 
    height: 100%;
    background-image: url('image.jpg');
    z-index: -1;
}
#background-gradient {
    position: absolute;
    right: 0;
    top: 0; 
    z-index: 0;
    height: 100%;
}
#content {
    position: absolute;
    left: 15%;
    top: 15%;
    width: 500px;
    font-family: Georgia;
    font-size: 16px;
}
p.dropcap:first-letter {
    float: left;
    font-size: 50px;
    line-height: 30px;
    padding-top: 2px;
    padding-right: 4px;
    font-family: Georgia;
}
h1 {
    font-size: 55px;    
}
</style>
</head>

<body>
<img id="background-image" src="image.jpg" />
<img id="background-gradient" src="gradient.png" />
<div id="content">
<h1>[TITLE]</h1>
<p class="dropcap">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nibh lectus, vehicula quis elementum nec, pellentesque vitae est. In in libero pulvinar felis ultrices varius vel at augue. Suspendisse sollicitudin risus eu mauris ultrices nec auctor neque facilisis. Pellentesque commodo tellus quam. Praesent dictum sodales nisi, id tempor neque hendrerit id. Ut non mi a ante pulvinar tempor. Morbi scelerisque metus eu sem iaculis hendrerit. Integer pulvinar ipsum quis ante tincidunt gravida.</p>
<p>Nullam vel tellus sed mauris sagittis egestas at sed lacus. Pellentesque sit amet justo felis. Donec sit amet est in urna consectetur convallis vitae id justo. Sed adipiscing accumsan augue, at cursus lorem bibendum nec. Etiam diam odio, sagittis ut tempor fermentum, elementum eu erat. Vivamus pharetra, nibh vel elementum pulvinar, risus leo ornare felis, eget tincidunt velit odio non turpis. Proin semper metus eget nisi varius varius elementum nisl eleifend. Nulla facilisi. Suspendisse urna sapien, pulvinar non porttitor pellentesque, laoreet id leo. Praesent sed tortor quis tellus eleifend ultricies et eu eros. Sed massa eros, hendrerit eu facilisis sed, fermentum sit amet purus. Nulla aliquam eleifend ante, tincidunt pulvinar dolor elementum eu. Proin quis justo in arcu sollicitudin faucibus ac tincidunt ligula.</p>
</div>
</body>
4

2 に答える 2

0

float:right と float:left だけで、以前の外観にするためにマージンを追加します
Demo

于 2012-04-07T15:08:54.143 に答える
0

container直接内部にある div 内にすべての HTML コードを配置しますbody。次のように、CSS コードを body から に移動できます#container。

#container {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    min-width: 1024px;
    min-height: 768px;
}

本体に設定できないIIRC min-width。ただし、以前のバージョンの IE は をサポートしていないため、注意が必要ですmin-width。

于 2012-04-07T15:01:01.497 に答える