1

我希望当我的浏览器窗口调整大小时我的图像大小不会改变，它应该覆盖所有 div 内容。问题是当我调整窗口背景图像的大小时，它只覆盖显示的浏览器区域，看起来我的内容超出了它的 div。 .如果有scollbar就可以了..但即使有那个..plz帮助也无法找到解决方案..

这是我的代码...

<style>
div{
 background-width:100%; 
 background-image: url('back5.jpg');
 background-id:back5;
 background-overflow-x:scroll;
}

</style>

</head>

<body style="margin:0px;overflow-x:scroll">

    <div>

    <img src="logo.gif">





    <label  style="type=text/css;position:absolute;left:600px;top:18px"/>

            <font size="5" style="color:#ffffff">E-mail:</font>

    </label>

    <label  style="type=text/css;float:right;position:absolute;left:600px;top:48px"/>

            <font size="5" style="color:#ffffff">Password:</font>

    </label>

    <Input type="text" name="_email" id="e_mail"  style= " type=text/css;-webkit-border-radius: 7px;
                                                          -moz-border-radius: 7px; border-radius: 7px;
                                                           background-color:#D8D8D8;
                                                           float:center;position:absolute;
                                                           left:720px;top:18px;
                                                           width:400px; height:25px"/>

    <Input type="text" name="_password" id="pass_word"  style="type=text/css;-webkit-border-radius: 7px; -moz-border-radius: 7px;
                                                                border-radius: 7px; background-color:#D8D8D8;
                                                                float:center;position:absolute;
                                                                left:720px ;top:48px; width:400px;
                                                                height:25px"/>

    <input type="submit" value="LogIn" style="type=text/css; float:center;position:absolute;
                                             left:870px ;width:600px; top:80px; width:60px;
                                             height:25px"/> 

    </div>



</body>

4

2 回答 2

2

如果我理解正确，您可以尝试一个众所周知的 CSS3 属性，称为 background-size。

background-size: 100%;

这仅适用于现代浏览器。更多信息可以在这里找到：https ://developer.mozilla.org/en-US/docs/CSS/background-size

于 2013-04-16T08:16:32.543 回答
1

您可以对图像使用引导响应类，

获取引导程序并将 bootstrap.css 包含到您的代码中。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">

那么你可以使用

<img src="..." class="img-responsive" alt="Responsive image">
于 2014-12-03T05:51:57.073 回答