Question

我正在使用图片（在<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;
}

Answer 1

似乎图像应该固定，而不是身体。

body,html {
    height: 100%; 
}

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

http://jsfiddle.net/xYqsT/

Answer 2

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

Answer 3

您可以在纯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-。 Taken from here和original spec found here。

修改

使用过滤器未保留宽高比...非常正确，它不会像background-size:cover;那样缩放保留率。不过，这是一篇非常好的文章，介绍了不同的使用方法：

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

它们提供多种CSS-only和jQuery方法。一个人必然会提供你想要的东西。

Answer 4

我不能使用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");

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

<强> DEMO

Answer 5

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

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

您可以使用背景大小来适当调整图像大小（将其拉伸至100％）

Answer 6

您可能希望在元素（或多个元素）中弹出所有页面内容，并为其提供高于背景z-index的{{1}}。

E.g。

HTML

<img>

CSS

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

如何使用<img/>元素作为z-index的背景图像？

HTML

CSS

6 个答案:

HTML

CSS