Html 如何使用<；img>；元素作为具有z索引的背景图像？_Html_Css

Html 如何使用<；img>；元素作为具有z索引的背景图像？

html css

Html 如何使用<；img>；元素作为具有z索引的背景图像？,html,css,Html,Css,我使用图像（在标记中）作为背景。我希望它永远是最远的物体。但是我的段落没有显示出来，因为它被图片掩盖了我知道这和z指数有关，但我不能让它工作 HTML 您需要将图像设置为背景图像 body { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1; /* Ensure div tag stays behind content; -999

我使用图像（在

标记中）作为背景。我希望它永远是最远的物体。但是我的段落没有显示出来，因为它被图片掩盖了

我知道这和z指数有关，但我不能让它工作

HTML

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

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

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

如果段落或内容需要具有

位置：relative

，否则任何具有z索引的内容都优先。

您可以在纯CSS中执行此操作，即使是对于古老的浏览器也是如此。这应该涵盖IE5.5+：

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

该过滤器适用于IE8-，和

编辑

未使用筛选器保留纵横比。。。非常正确，它的比例保持率与

背景大小：cover不一样可以。不过，这是一篇关于不同使用方法的非常好的文章：

它们只提供多个CSS以及jQuery方法。一个人一定会提供你想要的。
似乎应该固定图像，而不是身体
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');
}

您可能希望将所有页面内容弹出到一个元素（或多个元素）中，并给它们一个高于您的背景
的z索引
例如
HTML
我不能推荐足够高的使用率。我已经在很多项目中使用过它，因为在CSS中保存图像的纵横比并没有真正的解决方案。如果你只支持IE9+，那么无论如何，PlantTheIdea的答案是最好的。但是对于任何来这里并且需要为IE8保留纵横比的人来说，如果他们需要使用
而不是背景图像，那么就使用这个很棒的小插件
只需一行即可将其用作总背景：
<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>

也可以将其设置为任何元素的背景：
main {
    position:relative;/* So that it behaves as if it were position:static, but still gets a z-index */
    z-index: 1;
}

您还可以将多个图像传递到函数和其他参数中，以创建幻灯片等
为什么不在CSS中使用背景图像
？因为我无法在所有浏览器中使其拉伸提供大于的z索引。stretchI guess背景大小
不在旧版本中。仍然-你为什么要拉伸它？这通常看起来很糟糕。z-index
仅适用于定位元素（位置：绝对、位置：相对或位置：固定）.我只想为背景图像修复它，这样我就不必一直应用相对于所有未来图像的位置elements@stackover除非您将z-index
属性设置为position
属性，否则该属性将毫无意义。那么，如何将背景图像设置为始终位于最后面？@stackover:您不能，无需设置背景图像以外的其他内容。正如我在回答中所建议的，你最好的选择（除了不用担心IE 8中的背景大小）是将所有其他页面内容包装在一个z索引高于背景标记的元素中。如果你坚持使用img
或其他元素来代替正文上的背景图像
，然后，您还应该将内容包装在div
或其他容器中，这样您只需在该容器上设置位置：relative
，所有子项都会正确显示。显然，身体上的背景图像
是最好的选择。位置：绝对
也会起作用，取决于所需的效果，在这种情况下，OP需要固定的背景。问题是过滤器对图像进行了可怕的缩放，并且无法保持纵横比为真。更新了我的答案，链接到一篇描述多种方法的文章，希望其中一种方法就是他想要的答案。：）
<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>

main {
    position:relative;/* So that it behaves as if it were position:static, but still gets a z-index */
    z-index: 1;
}

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

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