1

我有一个 html 文档，我想将图像作为背景。对于下一个示例，一切都很好：

<html><head></head><body><div id="principal"></div></body></html>

CSS：

#principal 
{
    background: url(../Img/org/world.png) no-repeat;
    width:100%;
    height:100%;
    background-size: 100% 100%;
}

但是如果我将 html 文件重写为：

<!DOCTYPE html><html><head></head><body><div id="principal"></div></body></html>

不再显示来自 css 的图像（ background: url(../Img/org/world.png) no-repeat; ）。为什么？

4

2 回答 2

2

将此添加到您的样式表中：

html,body {width:100%;height:100%;}

您设置为 100% 的 DIV 没有任何参考应设置为 100% 的内容。告诉浏览器文档要填充 100% 的可用内容会为 div 元素创建一个引用。

一个摆弄的小提琴：http:
//jsfiddle.net/UJsRW/

于 2013-01-05T13:29:30.790 回答
0

第二个 html 标签应该在 head 标签之后。然后告诉 body 和 html 在你的 css 中是 100% 的高度和宽度。

这是代码工作：http: //jsfiddle.net/dbb67/2/

body, html {
width:100%;
height:100%;
}

#principal {
display:block;
position:relative;
background: url(http://fc00.deviantart.net/fs42/i/2009/154/4/d/fantasy_landscape_bg_9_by_joannastar_stock.jpg) no-repeat;
width:100%;
height:100%;
background-size: 100% 100%;
}
于 2013-01-05T13:32:38.833 回答