Question

我想用背景图片填充我的页面，并将文本与该背景对齐。使用下面的代码，背景图像加载在页面顶部，文本在它下面。我知道我可以使用“background：”功能，但是在我的下面的代码中完成它的方式允许自动调整大小，无论浏览器大小如何（即，移动设备具有小的浏览器大小）。所以，我只想把背景图片放在文本后面。

<html>
<head>

<title>Title</title>    

<style>

img.bg
{
    min-height: 100%;
    min-width; 781;

    width: 100%;
    height: auto;

    top: 0;
    left: 0;

    z-index: -1;
}

@media screen and (max-width: 781)
{
    img.bg
    {
        left: 50%;
        margin-left: -390.5;
    }
}

#container 
{
    position: relative;
    width: 781;
    margin: 50 px auto;
    height: 758;
    border: 1px solid black
}

#left
{   
    position: relative;
    left: 1.280409731113956%;
    top: 14.51187335092348%;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    width: 50%;
    height: 50%;
    color: #FFFFFF;
    position: relative;
}   

p
{
    font: 14px Georgia;
}

</style>

</head>

HTML

<img class="bg" src="background.jpg">

<div id="container">

<div id="left">
    <p>
    Text
    </p>
</div>

</div>

</body>
</html>

Answer 1

让你的BG图像的z-index为1，你的#container div的z-index为2.这有用吗？

img {
  position: relative;
  z-index: 1;
}

#container {
   position: relative;
   z-index: 2;
   top: 0px;
   left: 0px; /*or whatever top/left values you need*/
}

Answer 2

只需使用position: fixed作为背景图片http://dabblet.com/gist/3136606

img.bg {
    min-height: 100%;
    min-width: 781px;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: -1;
}

编辑（我希望有办法让它比这更明显）

好的，在阅读原始问题的评论之后，我明白目的是为任何显示尺寸设置一个可以很好地缩放的背景。

不幸的是，很多移动设备都遇到了position: fixed的问题 - 您可以阅读有关此here的更多信息。

所以在这种情况下，最好的解决方案是使用背景图片，而不是img标签，将background-size设置为100%（这将拉伸图像 - example）或cover（将缩放图片以使其完全覆盖屏幕 - example）

Answer 3

好吧，也许你也可以试试那个css：

body{
   background: url(images/bg.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

即使页面大小发生变化，也应覆盖所有页面

如何使用CSS / HTML使背景图像进入“背景”

3 个答案: