2

I am using an image (in an <img> tag) as a background. I want it to always be the furthest back object. But my paragraph isn't showing up because it is covered up by the image.

I know it has something to do with the z-index, but I can't get it working.

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

2

看起来图像应该是固定的，而不是身体。

body,html {
    height: 100%; 
}

.stretch {
    width:100%;
    height:100%;
    position: fixed;
    top:0;
    left:0;
    z-index:-1;
}

http://jsfiddle.net/xYqsT/

于 2013-10-11T15:07:58.927 回答
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-。取自这里，并在此处找到原始规范。

编辑

使用过滤器未保留纵横比......非常正确，它不会以相同的方式缩放保留比例background-size:cover;。不过，这是一篇非常好的文章，关于不同的使用方法：

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

它们提供了多种纯 CSS 以及 jQuery 方法。一个必然会提供你想要的。

于 2013-10-11T15:04:33.067 回答
1

我不能高度推荐使用backstretch.js。我已经将它用于很多项目，因为没有真正的解决方案来保留 CSS 中图像的纵横比。如果您只支持 IE9+，那么无论如何，PlantTheIdea 的答案是最好的。但是对于来到这里并需要为 IE8 保留宽高比的任何人，如果他们需要使用<img>而不是background-image使用这个很棒的小插件。

您只需一行即可将其用作总背景：

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

或者您可以将其设置为任何元素的背景：

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

您还可以将多个图像传递给函数和其他参数以创建幻灯片等。

演示

于 2013-10-11T15:17:51.270 回答
1

如果需要，前面的段落或内容position: relative，否则任何带有 z-index 的内容优先。

于 2013-10-11T15:02:30.317 回答
0

您需要将图像设置为背景图像

body {
    width: 100%; 
    height: 100%; 
    background: url('images/final2.gif') repeat;
}

您可以使用 background-size 适当地调整图像大小（将其拉伸到 100%）

于 2013-10-11T15:02:17.017 回答
0

您可能希望在一个元素（或多个元素）中弹出所有页面内容，并给它们一个z-index比您的背景更高的值<img>。

例如

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 回答