Css 用边界图像拉伸背景图像

下图表示所需的结果

通常，我会使用3个div应用这种情况：

<div class="holder">
    <div class="edge left"></div>
    <div class="content">background color or image stretched here</div>
    <div class="edge right"></div>
</div>

---

我不会使用边框图像，而是使用：before和：after。这将在容器前后创建两个附加元素

代码如下：

.container{
    position: relative;
}
.container:before,
.container:after{
    position: absolute;
    top: 0;
    bottom: 0;
    content: "";
    display: block;
    width: 50px;

}
.container:before{ right:100%: }
.container:after{ left: 100%; }

---

这将在每一侧为容器创建before和after元素。然后，您可以根据需要设置这两个元素的样式。

您可以使用1px

背景图像

作为您的

背景色

（我在示例中使用黑色，嵌入为base64），然后组合

背景大小

、

背景重复

和

背景位置

，以实现您的目标：

比如：

#nav {
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=);
    background-repeat: repeat-y;
    background-size: 100%;
    background-position: center center;
    border-width: 0px 38px;
    border-image: url(images/nav-border.png) 0 50;
}

---

请参见解决方案1：对边框图像使用填充和拉伸

您可以通过使用以下设置，对

边框图像

属性本身执行此操作：

• 边框图像切片的值
  fill
  。（确保切片小于原始图像宽度的一半）。您可以在中找到有关此选项的更多详细信息

• 边框图像重复的值
  拉伸

这适用于IE11、Edge、Firefox v45、Opera v36、Chrome v51（dev-m）

#导航{
边框宽度：0px 38px；
边框图像：url(http://i.stack.imgur.com/5foMd.png);
边框图像宽度：34px 98px；
边界图像切片：17 48填充；
边界图像重复：拉伸；
高度：30px；
}
#李海军{
线高：30px；
}
#李娜{
颜色：白色；
}

你能给我们看一下你用来制作第二个屏幕截图的代码（并上传图片）吗？请分享你的css或者创建一个Fiddle。我已经用代码和图片更新了问题。一个小提琴链接被添加为well@Ken：实际上，

背景色

可以剪裁成不覆盖边框的颜色。我已经在我的答案中添加了这个选项（以防万一你对此感兴趣）。谢谢你的回答。你能详细说明一下为什么不使用边框图像

：before

和

：after

并不能真正取代

边框图像

，后者通常（或至少可以）比在两侧添加两个元素做得更多。这确实是非常有趣的方法！虽然我相信“背景位置”的使用可以忽略。

#nav {
    background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=);
    background-repeat: repeat-y;
    background-size: 100%;
    background-position: center center;
    border-width: 0px 38px;
    border-image: url(images/nav-border.png) 0 50;
}