2016-08-03 6 views
0

この文法を使用して、2列の列を左揃え、右揃えの右揃えに作成しています。構文は完璧に機能します!列の整列を保持しているときに中央のテキストが画像上に表示される

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
    html {height:100%;} 
    body {height:100%; margin:0; padding:0;} 
    #bg {position:fixed; top:0; left:0; width:100%;z-index:-1; height:100%;} 
    #content {position:relative; z-index:1;} 
</style> 
<style type="text/css"> 
.wrap { 
    width: 1060px; 
    height:auto; 
    margin: auto; 
    text-align:center; 
    position:relative; 
} 
.text_over_image { 
    position: absolute; 
    margin: auto; 
    top: 0; 
    left:0; 
    right:0; 
    bottom:0; 
    color:#fff; 
    height:100px; 
} 
</style> 

</head> 

<body> 
<div id="bg"> 
<img src="C:Image1.jpg" width="100%" height="100%" alt="1stDay" /> 
</div> 
<div> 
    <span style="float: left;"> 
    <font size="30" color="red">Text1</font><br>  
    <img src="C:\1.jpg" alt="" style="width:425px;height:500px;"> 
    </span> 
    <span style="float: right;"> 
    <font size="30" color="red">Text2</font><br>  
    <img src="C:\2.jpg" alt="" style="width:425px;height:500px;"> 
    </span> 
</div> 
<div style="height: 650px;"></div> 
<div> 
    <span style="float: left; clear:both"> 
    <font size="30" color="red">Text3</font><br>  
    <img src="C:\3.jpg" alt="" style="width:425px;height:500px;"> 
    </span> 
    <span style="float: right;"> 
    <font size="30" color="red">Text4</font><br>  
    <img src="C:\t.jpg" alt="" style="width:425px;height:500px;"> 
    </span> 
</div> 
<div style="height: 650px;"></div> 
</body> 
</html> 

以下の構文で.wrapへの呼び出しを省略しています。 .wrapへの呼び出しを<div>タグの列に追加すると、構造体が破壊されます。

は、どのように私は私の画像の上にテキストを中心と<img>タグで画像を追加しないでください#bg?

+0

プログラミングやソフトウェア開発に固有の問題は話題にはなりません。[オントピック](https://superuser.com/help/on-topic)を参照してください。 [SO]を試してみてください。まず、[どうすれば良い質問をしますか?](https://superuser.com/help/how-to-ask)をお読みください。質問にフラグを立ててモデレータにマイグレーションを依頼することができます。 – DavidPostill

答えて

0

への呼び出しを使用して作成された列構造を維持することができます。以下のようにキーワードno-repeat center center fixedを持つCSS backgroundプロパティで追加してください。

background: url(../media/pic.png) no-repeat center center fixed; 
関連する問題