Question

一张完整的图片 想用它填充可以自适应的 table

理想样子(可以随宽高改变而改变)

但现在我只要改变table的 宽高 大于图片的宽高就会有问题如下图

简单代码：
.B1{
height:10px;
width:10px;
background:url('b.png') ;
}

.B2{
height:10px;
width: auto;
background:url('b.png') -10px 0px ;
}

.B3{
height:10px;
width: 10px;
background:url('b.png') no-repeat -92px 0px;}

除了把实际图片分割后放入相应的单元格内的方法，还有没有别的方法可以实现？
css有没有属性 截取图片后 放入相应的单元格格平铺成背景。





Answer 1

看样子你是想做高宽都可变的圆角容器，那么中央高宽可变区域要填充的一定是一张可重复的图像或者就如你示例中所示的纯色。
如果是图片，就把这部分图片单独切出来，采用repeat的方式填充中央区域；
如果是纯色，那就直接写CSS背景色。

以CSS Spirit的方式，可以用于给四边及四个角的图像定位填充，中央的填充，需要单独一张图像，这样，有两张图像即可完成。

追问

你好，我明白你的意思，但有没有可以直接用css的属性 来实现这种功能吗？

追答

背景图片可以以repeat的方式来填充，也可以放大缩小（CSS3），但要局部放大，CSS做不到。

Answer 2

用%比表示图片，宽高都设为100%