背景图片为什么会有重影

gpedit250715312 2010-01-28 04:37:38

现正在刚做的一个页面，中间遇到一些问题，以下是HTML和CSS原代，请帮我分析下为什么在<main>的<div>的<h3>第一个标题中会出现背景图片有重影的现象。。
HTML如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="GongSi.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="container">
<div id="banner"><img src="banner.jpg"></div>
<div id="globallink">
<ul>
<li><a href="">主页</a></li>
<li><a href="">公司简介</a></li>
<li><a href="">产品展示</a></li>
<li><a href="">新闻资讯</a></li>
<li><a href="">客户留言</a></li>
<li><a href="">联系我们</a></li>
</ul>
<br>
</div>
<div id="left">
<div id="logo">
<h4><span>用户登录</span></h4>
<form>
<p>用户名:<input type="text" class="text"></p>
<p>密码:<input type="password" class="text"></p>
<p><input type="button" class="btn" value="登录"><input type="button" class="btn" value="注册"><a href="#">忘记密码</a></p>
</form>
</div>
<div id="spring">
<h4><span>春节礼品</span></h4>
<ul>
<li><a href="">深海金昌鱼</a></li>
<li><a href="">生态黄花鱼</a></li>
<li><a href="">呼伦贝尔小羊排</a></li>
<li><a href="">呼伦贝尔羊小腿</a></li>
<li><a href="">呼伦贝尔羊肉卷</a></li>
<li><a href="">福州手工鱼丸</a></li>
<li><a href="">特色槟榔芋泥</a></li>
</ul>
<br>
</div>
<div id="xie">
<h4><span>阳澄湖大闸</span></h4>
<ul>
<li><a href="">3两母蟹4两公蟹-一级蟹</a></li>
<li><a href="">3.5两母蟹4.5两公蟹-特级蟹</a></li>
<li><a href="">4两母蟹5两公蟹-精品蟹</a></li>
</lu>
<br>
</div>
<div id="YiMeng">
<h4><span>沂蒙人家特产</span></h4>
<ul>
<li><a href="">干煸辣肉丝</a></li>
<li><a href="">干煸小草鸡</a></li>
<li><a href="">回锅全鸡</a></li>
<li><a href="">野生蚂蚱</a></li>
</ul>
<br>
</div>
<div id="tea">
<h4><span>高档礼品茶</span></h4>
<ul>
<li><a href="">普洱茶系列 </a></li>
<li><a href="">武夷岩茶</a></li>
<li><a href="">铁观音</a></li>
<li><a href="">大红袍</a></li>
<li><a href="">北京申奥第一茶</a></li>
</ul>
<br>
</div>
<div id="shipin">
<h4><span>天然有机食品</span></h4>
<ul>
<li><a href="">传说中的火山石米</a></li>
<li><a href="">高钙富硒米</a></li>
<li><a href="">五大连池-和矿泉水的米</a></li>
<li><a href="">特产黑花生</a></li>
<li><a href="">橄榄油</a></li>
</ul>
<br>
</div>
<div id="haixian">
<h4><span>海鲜系列</span></h4>
<ul>
<li><a href="">深海鲍鱼</a></li>
<li><a href="">珍贵海参</a></li>
<li><a href="">金枪鱼</a></li>
</ul>
<br>
</div>
</div>
<div id="main">
<div id="new">
<h3><span>新品上市</span><h3>
<ul>
<li><a href="#" title="鲍鱼"><img src="鲍鱼.jpg"></a><br>深海鲍鱼</li>
<li><a href="#" title="海参"><img src="海参.jpg"></a><br>大补海参</li>
<li><a href="#" title=="小羊腿"><img src="小羊腿.jpg"></a><br>呼伦贝尔小羊腿</li>
</ul>
<br>
</div>
<div id="hot">
<h3><span>本店热卖</span></h3>
<ul>
<li><a href="#" title="羊肉卷"><img src="特大羊肉卷.jpg"></a></li>
<li><a href="#" title="羊排"><img src="羊排.jpg"></a></li>
<li><a href="#" title="羊肉卷"><img src="羊肉卷.jpg"></a></li>
<li><a href="#" title="福州鱼丸"><img src="福州鱼丸.jpg"></a></li>
<li><a href="#" title="黄花鱼"><img src="黄花鱼.jpg"></a></li>
<li><a href="#" title="特色芋泥"><img src="特色芋泥.jpg"></a></li>
<li><a href="#" title="金枪鱼"><img src="金枪鱼.jpg"></a></li>
<li><a href="#" title="金鲳鱼"><img src="金鲳鱼.jpg"></a></li>
</ul>
<br>
</div>
<div id="tuijian">
<h3><span>店主推荐</span></h3>
<ul>
<li><a href="#" title="阳澄湖大闸蟹"><img src="1.jpg"></a></li>
<li><a href="#" title="鲍参翅"><img src="鲍参翅套装.jpg"></a></li>
<li><a href="#" title="烤全羊"><img src="全羊.jpg"></a></li>
<li><a href="#" title="沂蒙大红枣"><img src="大红枣.jpg"></a></li>
</ul>
<br>
</div>
<div id="tips">
<h3><span>天然有机食品简介</span></h3>
<ul>
<li><a href="#">鲍参翅的品种</a></li>
<li><a href="#">深海金枪鱼的肉片</a></li>
<li><a href="#">大闸蟹的选购</a></li>
<li><a href="#">有关芋泥的一个历史故事</a></li>
<li><a href="#">呼伦贝尔羊-怎一个”嫩“字了得-</a></li>
<li><a href="#">经典之作-福州鱼丸</a></li>
</ul>
<br>
</div>
</div>
<div id="footer">
<p>北京福榕祥商贸有限公司@版权所有 All Rights Reserved<br>地址：北京市朝阳区世纪东方城204-4-3底商<br>电话：010-87357585 传真：010-87357281 手机：13911589485/9<br>京ICP备049277534</p>
</div>
</div>
</body>
</html>

CSS原代如下：
body{
font:12px/1.8 Arial, Helvetica, sans-serif;
background:#8e5043;
text-align:center;
margin:0px;
padding:0px;
}
#container{
margin:0 auto;
text-align:left;
width:900px;
margin-top:30px;
}
#banner img{
border:1px solid #000000;
}
#globallink{
margin:0xp;
padding:0px;

}
#globallink ul{
list-style-type:none;
margin:0px;
padding:0px;
}
#globallink li{
float:left;
text-align:center;
width:150px;
}
#globallink a{
display:block;
padding:9px 6px;
margin:0px;
background:url(button1.jpg) no-repeat;
}
#globallink a:link,#globallink a:visited{
color:#63002;
text-decoration:none;
}
#globallink a:hover{
color:#000;
text-decoration:underline;
background:url(button1_bg.jpg) no-repeat;
}
#left{
float:left;
width:200px;
margin:0 auto;
padding:0px;
background:#fff url(bottom.gif) no-repeat bottom;
}
#logo form{
margin:0px;
padding:0px;
}
#logo p{
margin:0px;
text-align:left;
padding:4px 1px 4px 28px;
}
#logo p input{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
#logo form input.text{
border-bottom:1px solid #000;
border-left:none;
border-right:none;
border-top:none;
width:90px;
padding:0px;
}
#logo form input.btn{
margin:0px 4px;
}
#logo p a:link,#logo p a:visited{
color:#000066;
text-decoration:none;
}
#logo p a:hover{
color:#000;
text-decoration:underline;
}
#left div{
margin:0px 0px 5px 1px;
padding:0px;
position:relative;
}
#left div h4{
background:url(button2.jpg) no-repeat;
font-size:13px;
margin:0px;
padding:6px 5px;
}
#left div ul{
list-style-type:none;
margin:5px 15px 0px 15px;
padding:0px;
}
#left div ul li{
margin:0px;
padding:0px 3px 3px 6px;
background:url(icon2.gif) no-repeat 1px 9px;
}
#left br{
display:none;
}
#left div ul li a:link,#left div ul li a:visited{
color:#000099;
text-decoration:none;
}
#left div ul li a:hover{
color:#999900;
text-decoration:underline;
}
#main{
float:left;
width:690px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px 1px 1px 2px;
background:#fff;
}
#main h3{
background:url(button2.jpg) no-repeat;
margin:2px 3px;
padding:3px 0px;
font-size:13px;
}
#new{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
}
#new ul{
list-style-type:none;
margin:3px 4px;
padding:0px;
}
#new ul li{
float:left;
text-align:center;
padding:2px;
margin:1px 5px;
width:200px;
}
#new ul li img{
border:1px solid #8E5043;
}

...全文

422 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

gpedit250715312 2010-01-30

打赏
举报

[Quote=引用 6 楼 liheyueshi 的回复:]
LZ你说的重影的意思是不是本来图片就那么大，在你的指定位置确出现一张半的图片，也就是说一张整图再加上小半张图？？
如果是这样的话，把 <h3>的宽高限制设置为图片的宽高等同，然后加上background:url(图片) on-repeat
[/Quote]
哥们，你真的很有才，分就给你了吧。。。