2

<img>背景として（タグ内の）画像を使用しています。常に一番後ろのオブジェクトにしたいです。しかし、段落が画像に隠れて表示されません。

z-indexと関係があることは知っていますが、うまくいきません。

HTML

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html>

    <head>
    <title>2013 YourFantasyFootball</title>
<link rel="stylesheet" type="text/css" href="css/css_reset.css" />
<link rel="stylesheet" type="text/css" href="css/mystyles.css" />
</head>

<body>
<img src="images/final2.gif" class="stretch" alt="" />
<p>This is the first paragraph in the body of your new HTML file!</p>
asdfas
</body>
</html>

CSS

body {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
    z-index:-1;
}

p {
    color:red;
}
4

6 に答える 6

1

backstretch.jsの使用はあまりお勧めできません。CSS で画像の縦横比を維持するための実際の解決策がないため、多くのプロジェクトで使用してきました。IE9+ のみをサポートしている場合は、ぜひ、PlantTheIdea の回答が最適です。しかし、ここに来て、IE8 のアスペクト比を維持する必要がある人にとっては、<img>代わりにを使用する必要がある場合はbackground-image、この素晴らしい小さなプラグインを使用してください。

1行だけで完全な背景として使用できます。

$.backstretch('https://img.jpg');

または、任意の要素の背景として設定できます。

$("#demo").backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

複数の画像を関数やその他のパラメーターに渡して、スライドショーなどを作成することもできます。

デモ

于 2013-10-11T15:17:51.270 に答える
1

純粋な CSS でこれを行うことができます。古いブラウザでも可能です。これは IE5.5+ をカバーする必要があります。

body {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    background-image:url('images/final2.gif');
    background-size:cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/final2.gif',sizingMethod='scale');
}

フィルタは IE8- 用です。here から取得し、元の仕様は hereにあります。

編集

フィルターを使用して保持されないアスペクト比...非常に真実です。保持率を同じようにスケーリングしませんbackground-size:cover;。ただし、これは非常に優れた記事であり、使用するさまざまな方法について説明しています。

http://css-tricks.com/perfect-full-page-background-image/

複数の CSS 専用メソッドと jQuery メソッドを提供します。1 つは、あなたが望むものを提供するバインドされています。

于 2013-10-11T15:04:33.067 に答える
0

You might want to pop all your page content inside an element (or several elements), and give them a z-index higher than your background <img>.

E.g.

HTML

<body>
<img src="images/final2.gif" class="stretch" alt="" />
<main>
    <p>This is the first paragraph in the body of your new HTML file!</p>
    <!-- All page content goes in here. -->
</main>
</body>
</html>

CSS

main {
    position:relative;/* So that it behaves as if it were position:static, but still gets a z-index */
    z-index: 1;
}
于 2013-10-11T15:14:45.367 に答える