<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>圖片背景自適應</title>
<style type="text/css">
<!--
* {margin:0;padding:0;}
html{background:#FFFFFF;}
body{text-align:left;font:normal 12px/1.6em simsun, Verdana, Lucida, Arial, Helvetica, sans-erif;color:#353535;padding:130px;}
table{border-collapse:collapse;border-spacing:0;empty-cells:show;text-align:left;}
th,td{border-collapse:collapse;}
ol,ul{list-style:none;}
a {text-decoration:none;color:#353535;}
a:hover{color:#CD0102;}
input,select,form img,button{vertical-align:middle;}
button{border:0;cursor:pointer;}
img{border:0;display:block;}
em{font-style:normal;}
.cl{clear:both;}
.box{float:left;padding:11px 0 0 11px;background:url(/jscss/demoimg/200907/right.gif) no-repeat right top;overflow:hidden;position:relative;}
.bg_t{width:11px;height:100%;position:absolute;left:0;top:0;background:url(/jscss/demoimg/200907/left.gif) no-repeat left top;margin-bottom:-32767px;padding-bottom:32767px;/*高度自適應BUG*/}
.bg_b{height:11px;width:11px;background:url(/jscss/demoimg/200907/left.gif) no-repeat left bottom;position:absolute;left:0;bottom:0;}
.box img, .box p{padding:0 11px 11px 0;background:url(/jscss/demoimg/200907/right.gif) no-repeat right bottom;}
-->
</style>
</head>
<body>
<div class="box">
<div class="bg_t"></div>
<img src="http://www.baidu.com/img/baidu_logo.gif">
<div class="bg_b"></div>
</div>
<div class="box">
<div class="bg_t"></div>
<img src="http://www.codefans.net/images/logo.gif" />
<div class="bg_b"></div>
</div>
<div class="cl"></div>
<div class="box">
<div class="bg_t"></div>
<p>源碼愛好者（CodeFans.net）提供各類編程源碼、JavaScript/CSS特效代碼以及常用軟件下載等，做有質量的學習型源碼下載站。</p>
<div class="bg_b"></div>
</div>
</body>
</html>
CSS 自動背景佈局
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章