仅拉伸图像的一部分

Question

仅拉伸图像的一部分

htmlcss

3

我想创建一个div，其中只有部分背景会在div变大时拉伸。

情况：

- 我的图像可以分为3部分（1：上部，2：中间部分，3：下部）。 - 如果Y> Image 1.height + Image3.height，则我的div是Ypx长。 - 我的div与图像具有相同的宽度。

请求：

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

示例图片：

- Felix M

你的链接没有很好地解释你的问题，也许将页眉和页脚定义为绝对定位，你的正文会改变，你试过了吗？下次请提供一些代码以便得到帮助。 - MickyScion

我不知道除了<div>Lorem Ipsum</div>之外还能提供什么代码...你谈论页眉和页脚，所以你建议我做3个垂直的div吗？问题是我希望内容覆盖图像的三个部分，而不仅仅是中间的div。 - Felix M

根据您的要求，我认为您希望图像2进行拉伸，但是根据您的澄清，您想要的是标题、正文和页脚重新调整大小？这就是我从您的回答中所理解的，对吗？或者您可以尝试搜索另一个链接以找到您需要的内容 :-D - MickyScion

编辑过了，希望更清晰！ - Felix M

1

把它分成3个图像。创建一个容器div，里面有两个div用于上部和下部元素。将这些div绝对定位到顶部和底部，并设置适当的背景图像。将容器本身的背景图像设置为中间图像。 - numbers1311407

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CupawnTae · Accepted Answer

您可以使用border-image在不需要额外的HTML元素的情况下实现此效果。将边框应用于:before伪元素，并将z-index设置为-1以将其推至主内容后面。将上下边框宽度设置为红色和蓝色条纹的高度（例如此示例中的67px），将左右边框设置为0。在border-image中使用fill来使用图像的中间部分作为背景。并使用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;
}

fiddle http://jsfiddle.net/L9e3T/ - 您可以编辑结果窗格中的文本并动态调整大小。