1

我正在处理一个网页，在其中我使用了一个背景图像，我想将它拉伸到窗口的整个宽度，因为我上面有文字，无论如何我都希望它处于固定位置屏幕分辨率是。我正在寻找一个 CSS 实现，但如果 Javascript 是我最好的选择，我会愿意使用它。

这是我的页面的样子：http ://dl.dropbox.com/u/9134840/demo/windowsxp.html

除非您使用的是 1080p 显示器，否则背景图像不会完全从边缘延伸到边缘，并且会留下一点空白。任何帮助，将不胜感激。

html {
}

body {
}

#img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.title {
    position:absolute;
    top:180px; 
    left:350px;
    width:700px; 
    color:Purple;
    font-style:oblique;
    font-family:cursive;  
    text-shadow: 1px 1px;
}

#pre {
    position:absolute;
    top:280px; /* in conjunction with left property, decides the text position */
    left:150px;
    width:700px;
    font-size:large;
    font-family:cursive;
}

#header {
    position:absolute;
    top:530px; 
    left:450px;
    width:700px;
    font-size:x-large;
    font-family:cursive;
}

#sub {
    position:absolute;
    top:580px; 
    left:160px;
    width:1090px;
    font-size:x-large;
    font-family:cursive;
}

HTML

<div id="background">
<img src="back2.png" id="img" class="stretch" alt="" />
4

3 回答 3

5

使用background-sizeCSS 的属性

文档：https ://developer.mozilla.org/en-US/docs/CSS/background-size

于 2012-08-22T18:20:51.853 回答
2

您可以将宽度扩展到 100% 以上。尝试的一种选择。否则我同意 techfoobar，使用背景 css 属性，特别是背景大小。

于 2012-08-22T18:23:15.037 回答
0

将图像及其容器的边距设置为 0，宽度设置为 100%。<div>不需要使用 a 。例如：

body
{
    top:0;
    left:0;
    right:0;
    width:100%;
}


#background
{
    top:0;
    left:0;
    right:0;
    width:100%;
}


#img
{
    top:0;
    left:0;
    right:0;
    width:100%;
    position: absolute;
}
于 2012-08-22T18:33:39.643 回答