Question

这对我来说有点尴尬，因为我一直在使用CSS这么长时间谋生，我会被认为是专家。然而！专家们每天也学习新事物。

嗯，我的问题是，这个带有完全拉伸的Bg图像的示例代码在Chrome和FF中工作得非常好，它也应该在IE中工作（至少IE8）但是我不能让它工作，图像显示但是如果内容框没有设置为相对定位，则文本包含在图像内部。

我希望你能帮助我。

<html>
<head>
        <style>     body, html {
        margin:0px; padding:0px;
        background-color:#fff;
        font-family:Tahoma, Geneva, sans-serif;
        font-size:12px;

    }
    img.bg {

        min-height: 100%;
        min-width: 1024px;
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
    }

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



    #spacer { height:20px; }
    #content { width:900px; margin:0 auto; padding:10px;  position:relative; }
    #header { height:117px; }
    #logo { float:left; width:101px; height:117px; }
    #menu { float:left; height:50px; width:749px; margin-left:50px; margin-top:70px;   }

    #menu ul { list-style:none; margin:0px; padding:0px; }
    #menu ul li { padding:0px; margin:0px; float:left; line-height:50px; padding-left:10px; margin-right:10px; }
    h1 { margin:0px; padding:0px; color:#333333; font-size:16px; text-decoration:underline; margin-bottom:10px; }
    #menu ul li a { color:#333; text-decoration:none; }

    #lftmen { float:left; width:140px; margin-top:70px; }
    #lftmen ul { margin:0px; padding:0px; list-style:none; }
    #lftmen ul li { height:30px; background-image:url(img/lftbg.png); border:1px dashed #999; margin-bottom:10px; }
    #lftmen ul li a { color:#fff; line-height:30px; text-decoration:none; margin-left:20px; font-size:14px; }
    #lftmen ul li a:hover { color:#333;  }
    #midcont { line-height:16px; float:left; margin-top:60px; background-image:url(img/contbg.png); width:729px; margin-left:10px; font-size:12px; padding:10px; }




        </style>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
<img src="img/bg.jpg" class="bg" />

    <div id="content">

        <div id="header">
            <div id="logo"><img src="img/logo.png" /></div>
            <div id="menu">
                <ul>
                    <li>Opdatering: Zhoop rekrutere butikker i Aalborg</li>

                </ul>
            </div>
            <div style="clear:both;"></div>
        </div>

        <div id="lftmen">
            <ul>
                <li><a href="index.php">Forside</a></li>
                <li><a href="video.php">Se video</a></li>
                <li><a href="virk.php">Udbyd tilbud</a></li>
                <li><a href="info.php">Information</a></li>
                <li><a href="kontakt.php">Kontakt</a></li>
                <li><a href="../Zhoop.apk">Hent: android</a></li>
            </ul>
        </div>

Answer 1

首先，为什么要使用<img/>来定义页面背景模式。更适合直接在css中定义这种背景。 e.g：

body {
    background: url(img/bg.jpg) 0 0 no-repeat;
    ...
}

CSS stretch bg图片在IE中不起作用

1 个答案: