cssレイアウトで画像に文字を挿入する
1053 ワード
画像に文字を追加)
1、【background】背景画像を引用し、
2つの参照:
css:｛background:URL(img.jpg)｝
html:
2、寸法を必要とするdivブロックを確立し、divブロックを新設し、元のカバーを利用して既存のものをカバーする.
3、ブロックは画像【div】ブロックに含め、文字【div】ブロックを含める.
4、注需要制御方向【float】.
1、【background】背景画像を引用し、
2つの参照:
css:｛background:URL(img.jpg)｝
html:
2、寸法を必要とするdivブロックを確立し、divブロックを新設し、元のカバーを利用して既存のものをカバーする.
3、ブロックは画像【div】ブロックに含め、文字【div】ブロックを含める.
4、注需要制御方向【float】.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style type="text/css">
.div{width:800px; height:450px;}
.img{width:800px; height:450px; background:url(../img.jpg);}
.imgfont{ width:650px; height:400px; float:right;}
.font{ width:650px; height:50px; float:right;}
.fontt{width:180px;height:50px; text-align:center; color:#FFF; font-size:16px;}
</style>
</head>
<body>
<div class="img">
<div class="imgfont">
</div>
<div class="font">
<div class="fontt">
<p> </p>
</div>
</div>
</div>
</body>
</html>