<style> .box{ background: url(img/bottom-left.gif) no-repeat left bottom; } .box-outer{ background: url(img/bottom-right.gif) no-repeat right bottom; padding-bottom: 1em; } .box-inner{ background: url(img/top-left.gif) no-repeat left top; } .box h2{ background: url(img/top-right.gif) no-repeat right top; padding-top: 1em; } .box h2,.box p{ padding-left:1em ; padding-right: 1em; } </style> </head> <body> <div class="box"> <div class="box-outer"> <div class="box-inner"> <h2>head</h2> <p>关于CSS的滑动门技术，简单的说就是背景可以随着上面的字数的多少而自由收缩。</p> </div> </div> </div> </body>
当内容足够多就会把图片撑开，如下白色部分没有背景图了
css3可以有多个背景图像，可以这样写：ie不支持
<style> .box{ background-image: url(img/top-left.gif),url(img/top-right.gif),url(img/bottom-left.gif),url(img/bottom-right.gif); background-repeat:no-repeat,no-repeat,no-repeat,no-repeat; background-position: top left,top right,bottom left,bottom right; padding: 1em; } </style> </head> <body> <div class="box"> <h2>title</h2> <p>载有巴西甲级球队沙佩科恩斯球员的飞机在哥伦比亚坠机，超过70人遇难。根据《世界体育报》最新的报道，就在18天之前，梅西所在的阿根廷国家队乘坐的就是这架失事飞机。</p> </div> </body>