网页设计背景问题！想请教大神
为什么文字会露出来，背景不能包全<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人名片</title>
<style>
#example1 {
background-image: url(http://picture.), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 80px;
}
#example2 {
background-image: url(http://picture.), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 80px;
}
#example3 {
background-image: url(http://picture.), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
padding: 80px;
}
p1 {font-size:20px;}p4{font-size:40px}
<div style="opacity:55;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF"></div>
</style>
</head>
<body>
<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;bac<<>>kground-color:#40B3D"><img src="http://pic16. width="300" height="39" /></div>
<div id="example1">
<h1><b style="color:#E31C46;font-size:40px">个人名片</b></h1></br>
<p4><b style="color:#EA5323">姓名:</b>XXX</p4></br>
<p1><b style="color:#EA5323">职业:</b>XXX</p1><br/>
<p2><b style="color:#EA5323">电话:</b><p2 style="font-family:arial;color:red;font-size:40px;">134xxxxxxx</p2></p2><br/>
<p3><b style="color:#EA5323">电子邮箱:</b><b style="color:#006666;font-size:20px;">xxxxxxxx@
</div>
<div id="example2">
<a href=https://www. style="text-decoration:none;"><b style="color:#FF3399;font-size:40px">个人主页</b></a>
<h1 style="text-align:center;"><b style="color:#FF0000">社会历程</b></h1>
<p><button type="button" onclick="alert('你好！我是XXX' )"><img src="http://pic16. width="50" height="39" /></button></p>
<p><img src="http://pic16. width="258" height="39" /></p>
<p><span style="background-color:#B4009E;color:#ffffff;font-size:40px;">愛新覚羅</span></p>
</div>
<div id="example3">
<h1><b style="color:#FF3366;font-size:40px;">个人格言</b></h1>
<p><b style="color:#1CFB07;font-size:80px;">人生没有如果，只有结果！</b></p>
<span style="background-color:#B4009E;color:#ffffff;font-size:40px;">如果今天不努力工作，明天就要努力找工作！</span></p>
<p>不管你的工作是什么工种，<br/>只要你肯努力一定能学到东西！</p>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FF3366;">
<h1 style="margin-bottom:0;">愛新覚羅氏</h1></div>
<div id="menu" style="background-color:#FFD700;height:330px;width:109px;float:left;">
<b>清朝帝国</b><br>
皇帝的姓氏<br>
愛新覚羅来历<br>
末世皇帝</div>
<div id="content" style="background-color:#59D51F;height:330px;width:387px;float:left;">
<b style="color:#003366">愛新覚羅为清朝皇帝的姓氏！</b>
<p>
<table border="3; background-color:#FF3366;" style="color:#FF3366">
<colgroup>
<col span="3" style="background-color:#003366">
</colgroup>
<tr>
<th>商品名</th>
<th>价钱</th>
<th>产地</th>
</tr>
<tr>
<th>X商品</th>
<th>$xxxx</th>
</tr>
<tr>
<th>H商品</th>
<th>$xxxx</th>
</tr>清朝官网的代遇！
</table>清朝皇帝的财富！
<table border="5"; style="color:red">
<col span="1" style="background-color:#00336">
<col span="2" style="background-color:#003366">
</colgroup>
<tr>
<td>姓名</td>
<td>假时</td>
<td>补时</td>
<td>工时</td>
<td>扣款</td>
<td>实发</td>
</tr>
<tr>
<th>某XX</th>
<td>x小时</td>
<td>y小时</td>
<td>s小时</td>
<td>$xxxx</td>
<td>$XXX</td>
</tr>
</table>
<p>清朝的代遇！</p>
</div>
<div id="content" style="background-color:#98BEF4;height:115px;width:500px;float:left;">
<b style="color:##ED8F12">清朝末代的衰落！</b><form action="2">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form></div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 ©
</div>
<table border="3; background-color:#FF3366;" style="color:#FF3366">
<colgroup>
<col span="3" style="background-color:#003366">
</colgroup>
<tr>
<th>商品名</th>
<th>价钱</th>
<th>产地</th>
</tr>
<tr>
<th>X商品</th>
<th>$xxxx</th>
</tr>
<tr>
<th>H商品</th>
<th>$xxxx</th>
</tr>
</table>
</body>
</html>
