仅拉伸图像的一部分

Question

我想创建一个div，如果div变大，只有一部分背景可以伸展。

情况：

• 我的图像可分为3个（1个：上部，2个：中间部分，3个部分：下部）。
• 我的div是Ypx long，其中Y＆gt;图像1.高度+图像3.高度
• 我的div与图像的宽度相同

请求：

• 图像1和3应始终显示。
• 图片2应根据div大小进行拉伸。

示例图片：

Answer 1

您可以使用border-image来实现此目的，而无需HTML中的额外元素。将边框应用于:before伪元素，其z-index为-1，将其推送到主要内容后面。将顶部和底部边框宽度设置为红色和蓝色条纹的高度（本例中为67px），左右边框设置为0.使用fill中的border-image使用中间部分图像作为背景。并使用border-box box-sizing来使元素内的边框。

.flagbg {
    position:relative;
    width:213px;
}
.flagbg:before {
    box-sizing:border-box;
    z-index:-1;
    position:absolute;
    top:0;
    left:0;
    content:'';
    height:100%;
    width:100%;
    border-width:67px 0 67px 0;
    border-image:url('flag.png') 67 0 67 0 fill repeat stretch;
}

小提琴http://jsfiddle.net/L9e3T/ - 您可以编辑结果窗格中的文字并看到它动态调整大小