利用float+margin实现
.left{width：100pxfloat:left}
.center{float:leftwidth:100%margin-right:-200px}
.right{width:100pxfloat:right}
利用table实现
.parent{width:100%display:tabletable-layout:fixed}
.left,.center,.right{display:table-cell}
.left{width:100px}
.right{width:100px}
利用flex实现
.parent{display:flex}
.left{width:100px}
.center{flex:1}
.right{width:100px}
您好!很高兴为您解答问题,以下是我为您提供的解答内容：新建一个html文档。
设置一下HTML的框架，然后把图片设置在同一个文件夹里面。
加入，这样可以有样式设置。
因为背景设置在主体，所以还要定义为body{}。
background-image:url(图片)，这个是添加图片的意思。
然后我们需要加入background-repeat:repeat-x这个时候就会横向平铺。
无法按你说的理想实现。但大神们一般不会去找盖茨非让他把这个功能加上，一般都是想个变通的方法。
首先我不知你为什么要用多个DIV，为什么要用同一张图片，为什么有大有小，为什么非得是背景。我给你说个思路，肯定行。
首先背景自适大小肯定行不通，那么不是背景的话，就是一张图片的话肯定可以行得通的（定义每个DIV宽高，里面的图片宽高），所以看代码吧
<div
style="position:relativewidth:300pxheight:200pxborder:1px
solid
redfloat:left">
<img
src="img/header_right.jpg"
style="width:300pxheight:200px">
<div
style="position:absolutetop:0pxleft:0px">这里放入内容1</div>
</div>
<div
style="position:relativewidth:200pxheight:100pxborder:1px
solid
redfloat:left">
<img
src="img/header_right.jpg"
style="width:200pxheight:100px">
<div
style="position:absolutetop:0pxleft:0px">这里放入内容2</div>
</div>
<div
style="position:relativewidth:100pxheight:50pxborder:1px
solid
redfloat:left">
<img
src="img/header_right.jpg"
style="width:100pxheight:50px">
<div
style="position:absolutetop:0pxleft:0px">这里放入内容3</div>
</div>
