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

2 番目の html タグは head タグの後にある必要があります。次に、css で body と html の高さと幅を 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 に答える