0

我想用背景图像填充我的页面，并使文本与该背景对齐。使用下面的代码，背景图像加载到页面顶部，文本位于其下方。我知道我可以使用“背景：”功能，但在我下面的代码中完成的方式允许自动调整大小，而不管浏览器大小（即移动设备的浏览器大小）。所以，我只希望背景图像位于文本后面。

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

3 回答 3

2

使您的 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*/
}
于 2012-07-18T14:45:00.900 回答
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阅读更多相关信息。

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

于 2012-07-18T14:45:11.217 回答
1

好吧，也许你也可以试试那个 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;
}

即使页面大小改变，它也应该覆盖你的所有页面

于 2012-07-18T14:46:55.897 回答